Vue3 中使用 `<script setup>` 实现弹窗重新调用 onMounted 钩子函数
<p>"Vue3 中使用 "<script setup>" 实现弹窗重新调用 onMounted 钩子函数"\n\n在 Vue 3 中，使用 "<script setup>" 可以更简洁地编写组件，并且可以让组件的选项在一个单独的区块中定义。要在弹窗提交或关闭后重新调用弹窗内的 "onMounted" 钩子函数，可以使用 "ref" 来创建一个响应式的变量来控制弹窗的开关状态，并使用 "watch" 来监听这个变量的变化。\n\n以下是一个示例代码：\n\n<code>vue\n<template>\n <div>\n <button @click="openDialog">打开弹窗</button>\n <dialog :open="isOpen" @close="closeDialog">\n <h2>弹窗内容</h2>\n </dialog>\n </div>\n</template>\n\n<script setup>\nimport { ref, onMounted, watch } from 'vue';\n\nconst isOpen = ref(false);\n\nonMounted(() => {\n console.log('弹窗已打开');\n});\n\nwatch(isOpen, (newValue) => {\n if (newValue) {\n console.log('弹窗已提交或关闭，重新调用 onMounted');\n // 调用弹窗内的 onMounted 逻辑\n }\n});\n\nconst openDialog = () => {\n isOpen.value = true;\n};\n\nconst closeDialog = () => {\n isOpen.value = false;\n};\n</script>\n</code>\n\n在上面的示例中，我们使用 "ref" 创建了一个名为 "isOpen" 的响应式变量来表示弹窗的开关状态。在 "onMounted" 钩子函数中，我们输出了一个日志，表示弹窗已打开。然后，我们使用 "watch" 来监听 "isOpen" 的变化，并在变化时进行相应的操作。当 "isOpen" 的值为 "true" 时，表示弹窗已提交或关闭，我们可以在 "watch" 的回调函数中重新调用弹窗内的 "onMounted" 逻辑。\n\n当点击打开弹窗按钮时，我们调用 "openDialog" 方法，将 "isOpen" 的值设为 "true"，弹窗将会打开。当点击弹窗的关闭按钮时，我们调用 "closeDialog" 方法，将 "isOpen" 的值设为 "false"，弹窗将会关闭。同时，"watch" 监听到 "isOpen" 的变化，会触发回调函数，我们可以在回调函数中重新调用弹窗内的 "onMounted" 逻辑。\n\n请注意，在上述示例中，我们只是在 "watch" 的回调函数中输出了一个日志，表示重新调用了 "onMounted" 逻辑。实际上，你需要根据你的具体需求来编写相应的逻辑代码。</p>
原文地址: https://www.cveoy.top/t/topic/pwyv 著作权归作者所有。请勿转载和采集!