前端Vue父组件挂载子组件弹窗,父组件按钮点击无法开子组件弹窗解决方案

报错信息

Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'shows')"

found in

---> <Index> at src/router/views/purchase-order-management/new/index.vue
       <App> at src/App.vue
         <Root>

父组件

html

<template #cell(order)="data">
<b-button variant="success" size="sm" @click="orderModal(data)">Order</b-button>
</template>

//挂载

<modalOrder
  ref="modalOrderComponent"
   :orderData="orderData"
   v-if="orderData.length > 0">
</modalOrder>

js

错误的写法

	data(){
    
    
	return{
    
    
	  orderData: []
	}
	}

        // 打开表格order弹窗
        orderModal(data) {
    
    
            // 得到每一行order的data数据
            console.log(data, '我是父组件单行数据');
            this.orderData.push(data);
            // 错误的写法
            this.$refs.modalOrderComponent.shows();
			// 下面这个正确写法
            // this.$nextTick(() => {
    
    
            //     this.$refs.modalOrderComponent.shows();
            // })
        },

解决

就是渲染期间无法找到子组件shows();的方法,我感觉应该是父组件已经加载完了,子组件方法还没有渲染,用这个this.$nextTick()声明周期,也就是说等父组件加载完后再执行这个shows(),就可以正常显示了

把父组件的js修改一下

修改父组件js

正确写法

	data(){
    
    
	return{
    
    
	  orderData: []
	}
	}

        // 打开表格order弹窗
        orderModal(data) {
    
    
            // 得到每一行order的data数据
            console.log(data, '我是父组件单行数据');
            this.orderData.push(data);
       
			// 下面这个正确写法
           this.$nextTick(() => {
    
    
             this.$refs.modalOrderComponent.shows();
           })
        },

子组件

子组件又挂载封装的弹窗调用绑定ref的infoModalDetails,封装弹窗组件

  methods: {
    
    
    shows() {
    
    
      this.$refs.infoModalDetails.show();
    },
   }

封装弹窗组件

show() {
    
    
   this.visible = true;
},

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！