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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

Musican佩奇   2020-06-02 我要评论

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

今天遇到这个问题后,

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

本来之前用的好好的,

但是今天死活在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中渲染的解决方式

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

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

 

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们