vue3 子组件弹窗打开子组件弹窗并传值

在 Vue3 中，你可以通过 props 和事件驱动的方式让子组件间的交互更为便捷。如果你想在子组件 A 的弹窗里点击一个按钮，然后打开子组件 B 的弹窗，并传递一些数据，可以按照以下步骤操作：

1. 定义父子组件结构：
- 父组件 (例如 Parent.vue) 可能会有一个方法 `openChildModal`，这个方法接收数据作为参数，用于触发子组件 B 的打开。

   <template>
     <button @click="openChildModal({ dataToPass })">打开子组件 B</button>
     <ChildB :data="childData" />
   </template>

   <script>
   import ChildB from './ChildB.vue';
   export default {
     components: { ChildB },
     methods: {
       openChildModal(data) {
         this.childData = data;
         // 显示 ChildB 组件的弹窗
         this.$refs.childB.open();
       }
     }
   };
   </script>

2. 在子组件 B (例如 ChildB.vue) 中，假设它有一个显示弹窗的函数 `open`，接受一个 prop `data` 并处理它：

   <template>
     <div v-if="isShowing">
       <!-- 弹窗内容 -->
       <modal-button @click="close">关闭</modal-button>
     </div>
   </template>

   <script>
   export default {
     props: ['data'],
     data() {
       return {
         isShowing: false,
       };
     },
     methods: {
       open() {
         this.isShowing = true; // 打开弹窗
       },
       close() {
         this.isShowing = false; // 关闭弹窗
       },
     },
   };
   </script>

3. 当需要在子组件 B 的弹窗内部修改或传递数据，可以直接在回调函数中更新 `this.data` 属性。