Vue 父子通话

Posted 2020-10-15 tony_zhu

dom:

<app-entry ref="child" :id=‘entryFaid‘  v-on:refreshbizlines="EntryUpdateData" v-on:checkOptions="EntryOptions" v-on:ChildSay="ChildReady"></app-entry>

 

js:

import entry from ‘@/components/entryList.vue‘//引入组件

 

//局部引入组件

components: {

    ‘appEntry‘: entry 

},

 

//引用子组件的函数 ref="child"

this.$refs.child.parentMsg(this.entryFaid)

 

 

问题：在el-dialog 引用了组件 一开始不渲染，导致函数调用不到？

解决：当调用函数 el-dialog 显示出来后 ，渲染了组件，在生命周期 mounted中立刻对父节点“大喊：我渲染好了”   

子组件：

mounted(){

    this.$nextTick(function () {

       this.$emit(‘ChildSay‘,true);

   })

}

父组件:

dom有监听： v-on:ChildSay="ChildReady"

methods: {

　　ChildReady:function(parms){

　　　　this.childHasMouned=true;//记录子组件已经渲染完毕状态

　　　　this.$refs.child.parentMsg(this.id);//执行子组件的函数（加载列表，等等）

　　}

}