父组件引入子组件弹窗

父组件引入子组件弹窗的过程中，可以通过在父组件中使用`$refs`来调用子组件的方法。首先，在子组件中封装弹窗组件，并在该组件的`methods`中定义一个`show()`方法，用于显示弹窗。然后，在父组件中，可以通过`this.$refs`来访问子组件的实例，并调用子组件的`show()`方法来显示弹窗。例如，可以在父组件的`methods`中定义一个方法，比如`orderModal(data)`，在该方法中通过`this.$refs`来访问子组件的实例，并调用子组件的`show()`方法来显示弹窗。同时，为了确保子组件的方法已经渲染完毕，可以使用`this.$nextTick()`来延迟执行子组件的方法。具体代码如下所示：

// 子组件
methods: {
  show() {
    this.visible = true;
  },
}

// 父组件
methods: {
  orderModal(data) {
    console.log(data, '我是父组件单行数据');
    this.orderData.push(data);
    this.$nextTick(() => {
      this.$refs.modalOrderComponent.show();
    });
  },
}

这样，在父组件中调用`orderModal(data)`方法时，会将数据传递给子组件，并通过`this.$refs.modalOrderComponent.show()`来显示子组件的弹窗。
#### 引用[.reference_title]
- *1* *2* *3* [前端Vue父组件挂载子组件弹窗,父组件按钮点击无法开子组件弹窗解决方案](https://blog.csdn.net/m0_49714202/article/details/127751239)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]