vue中的修饰符.sync
2021-04-02发布
|

子组件不能直接改变props中的值,通常通过$emit进行自定义事件,通知父组件进行修改。在vue2.3.0中引入了语法糖.sync,可以在子组件中同步修改。

通过下面的例子了解sync的用法

// 子组件 test-comp
<div v-if="visible">
    ...
</div>

<script>
  ...
  props:{
            visible:{
                type:Boolean,
                default:true,
            },
  }
  ...
  changeVisible(){
    this.$emit('update:visible',false)
  }
</script>

子组件中通过this.$emit('update:visible',false) ,将visible的值改为false

在引入子组件的时候,自定义属性 visible 后面加入修饰符.sync

//父组件中
<test-comp :visible.sync="true" />
------------ END ------------