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

<p>在 Vue3 中，你可以通过 props 和事件驱动的方式让子组件间的交互更为便捷。如果你想在子组件 A 的弹窗里点击一个按钮，然后打开子组件 B 的弹窗，并传递一些数据，可以按照以下步骤操作：</p>
<ol>
<li><p>定义父子组件结构：</p>
<ul>
<li>父组件 (例如 Parent.vue) 可能会有一个方法 <code>openChildModal</code>，这个方法接收数据作为参数，用于触发子组件 B 的打开。

<button @click="openChildModal({ dataToPass })">打开子组件 B</button>
<ChildB :data="childData" />
</template></li>
</ul>
<script>
import ChildB from './ChildB.vue';
export default {
  components: { ChildB },
  methods: {
    openChildModal(data) {
      this.childData = data;
      // 显示 ChildB 组件的弹窗
      this.$refs.childB.open();
    }
  }
};
</script>
<pre><code>
</code></pre>
</li>
<li><p>在子组件 B (例如 ChildB.vue) 中，假设它有一个显示弹窗的函数 <code>open</code>，接受一个 prop <code>data</code> 并处理它：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;div v-if=&quot;isShowing&quot;&gt;
    &lt;!-- 弹窗内容 --&gt;
    &lt;modal-button @click=&quot;close&quot;&gt;关闭&lt;/modal-button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: [&#39;data&#39;],
  data() {
    return {
      isShowing: false,
    };
  },
  methods: {
    open() {
      this.isShowing = true; // 打开弹窗
    },
    close() {
      this.isShowing = false; // 关闭弹窗
    },
  },
};
&lt;/script&gt;
</code></pre>
</li>
<li><p>当需要在子组件 B 的弹窗内部修改或传递数据，可以直接在回调函数中更新 <code>this.data</code> 属性。</p>
</li>
</ol>