vue3 watch props 监听属性变化

最新推荐文章于 2025-06-21 21:23:50 发布

曹天骄

最新推荐文章于 2025-06-21 21:23:50 发布

阅读量3.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/solocao/article/details/124765106

vue 专栏收录该内容

24 篇文章

订阅专栏

这篇博客探讨了如何在Vue应用中利用watch监听visible属性的变化，以控制模态框的显示与隐藏。核心代码展示了如何定义props并使用toRefs及watch方法，当visible值改变时触发alert。这为开发者提供了一种在组件间同步状态并执行相应操作的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的需求是弹出一个模态框。使用visible控制隐藏与现实，需要watch，visible变化，执行其他相关操作。
核心代码如下：

import { watch, toRefs } from "vue";
const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});
const visible = toRefs(props).visible;
watch(visible, (newValue, oldValue) => {
  alert(newValue);
});