首页vue3 让子组件弹出来

vue3 让子组件弹出来

时间: 2023-10-06 07:04:51 浏览: 347

在 Vue 3 中，可以通过使用 `Teleport` 组件来实现弹出子组件。`Teleport` 组件允许你将子组件挂载到指定的 DOM 节点上，而不是直接插入到父组件的 DOM 结构中。下面是一个示例，演示了如何在 Vue 3 中使用 `Teleport` 组件实现子组件弹出： ```vue <template> <div> <button @click="showModal">打开模态框</button> <teleport to="body"> <Modal v-if="showModal" @close="closeModal" /> </teleport> </div> </template> <script> import { ref } from 'vue'; import Modal from './Modal.vue'; export default { components: { Modal }, setup() { const showModal = ref(false); const closeModal = () => { showModal.value = false; }; return { showModal, closeModal }; } }; </script> ``` 在上述示例中，我们使用了 `Teleport` 组件将 `Modal` 组件挂载到 `<body>` 元素下。点击按钮时，`showModal` 的值会被修改，从而控制 `Modal` 组件的显示与隐藏。需要注意的是，`Teleport` 组件需要配合 Vue 3 的 Composition API 使用。在 `setup()` 函数中，我们使用了 `ref` 创建了一个响应式的 `showModal` 变量，并通过 `@click` 监听按钮的点击事件，通过修改 `showModal` 的值来控制 `Modal` 组件的显示与隐藏。在实际的项目中，你可以根据需要，将 `Teleport` 组件挂载到其他元素下，以实现弹出子组件的效果。

阅读全文