vue中watch的用法

最新推荐文章于 2024-09-07 19:02:26 发布

lqw199311

最新推荐文章于 2024-09-07 19:02:26 发布

阅读量626

点赞数

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

本文链接：https://blog.csdn.net/lqw199311/article/details/120910725

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细阐述了在Vue中，如何通过`sync`修饰符和watch机制实现父组件的visible属性同步到子组件的show属性，以及如何使用immediate属性确保初次绑定值时也能触发相应操作。通过实例代码展示了监听并响应父组件visible变化的技巧。

摘要由CSDN通过智能技术生成

父组件，以visible属性为例

 <RawDataUploadDialog :visible.sync="visibleUpload" :industry="filterConfig.industry" @refresh="queryApi"></RawDataUploadDialog>

子组件，监听父组件visible变化，并做操作
以dialog为例，此处visible不能直接用父组件传进来的visible属性

  <el-dialog
    :visible.sync="show"

父组件的属性这里需要接收，声明type值

  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },

data里声明show属性，初始值设置为父组件visible属性

  data() {
    return {
      show: this.visible,
    };
  }

在watch里监听父组件visible变化，当visible发生改变时更改子组件中show的值，watch中的show监听的是子组件的show属性，当show发生改变时，通过$emit方法触发父组件visible的更新，父组件声明visible属性时sync代表同步的意思，代表此属性是需要父子组件同步更新的

 watch: {
    show(v) {
      this.$emit('update:visible', v);
    },
    visible(v) {
      this.show = v;
      if (v) this.queryApi();
    },
  },

immediate属性
使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

immediate:true代表如果在 wacth 里声明了 visible 之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

'visible': {
      handler(v) {
        if (!v) {
          this.show = false;
          this.$emit('refresh');
        }
      },
      immediate：true //此时会直接执行handler方法
    }