小谢第12问:初始化页面的时候子组件为什么不渲染?

起因:今天在子组件中写了一个方法,想要在页面初始化的时候渲染页面,所以便有了下面的坎坷路程:

今天遇到这个问题后,

想在页面初始化的时候直接加载子组件,

本来之前用的好好的,

但是今天死活在vue的声明周期中找不到子组件,

问百度无非就是ref绑定,v-show实例dom之类,

但是这次不加载的原因是根本拿不到子组件,

更别提上面的几种方法了,

快要崩溃的时候,

对比了和平时写的子组件与有什么不同,

终于发现了,子组件是写在el-dialog弹出框中!!!

而这正是与其他子组件的不同之处,

于是我又扒开了element文档,

定位到dialog这个属性: :visible.sync

文档中的描述是: Dialog 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。因此,如果需要执行 DOM 操作,或通过  ref  获取相应组件,请在  open  事件回调中进行。 如果  visible  属性绑定的变量位于 Vuex 的 store 内,那么  .sync  不会正常工作。此时需要去除  .sync  修饰符,同时监听 Dialog 的  open  和  close  事件,在事件回调中执行 Vuex 中对应的 mutation 更新  visible  属性绑定的变量的值。

脑子看完后说它明白了,

一顿操作后,

当然是不行的

结果-----------------------------------------------------------目前仍然不能初始化拿到子组件,非得点开dialog之后子组件才会渲染

结论-----------------------------------------------------------只能定位到弹框的问题,但是没有在dialog中渲染的解决方式

最终解决方式:将子组件的方法调到父组件中,将方法放到父组件中的声明周期内,多定义变量,通过父子传值方式进行函数参数操作

总结:菜的想哭!!!等待大佬的解决方式!

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章