vue中.sync修饰符的用法

在使用vue实现业务的过程中，经常会遇到父组件向子组件传值，并监听由子组件调用$emit方法来改变对应的值。代码如下：

 1 //父组件
 2 <my-child :isBool="isBool" @boolChange="boolChange">
 3 ..
 4 ..
 5 data() {
 6  return: {
 7    isBool: true
 8  }
 9 }
10 
11 methods: {
12   boolChange(bool) {
13    this.isBool = bool
14  }  
15 }
16 
17 //子组件
18 ....
19 methods: {
20   test() {
21    this.$emit("boolChange", false)
22  }  
23 }
24 ....

这是最常见的写法。

 

vue为了书写方便，为这种模式提供一个缩写，即 .sync 修饰符：

 //父组件
  <my-child :isBool.sync="isBool">
  ..
  ..
  data() {
   return: {
     isBool: true
   }
  }
 
 //子组件
 ....
 methods: {
   test() {
    this.$emit("update:boolChange", false)
  }  
 }
 ....

注意：

使用.sync修饰符后，子组件的$emit事件一定要使用"update:myPropName"的模式触发，原因是使用.sync修饰符就相当于把父级代码变成下面这样：

<my-child
  :isBool="isBool"
 @update:isBool="isBool = $event"
></my-child>

 

posted @ 2021-03-23 09:43  吕沉  阅读(115)  评论(0)    收藏  举报