vue 中 sync修饰符的用法

父组件传递值给子组件时 在其绑定的变量后加上 :变量 .sync='xxx' ， 当在子组件中需要改变这个父组件中的值的时候 使用 $emit( 'update: 变量', 值 ), 这样可以省略一步在父组件中的接受函数

常规写法：

• 父组件中

   <myComponent :show='valueChild' @changeShow="accept" </myComponent>
    data(){
        return{
            valueChild: true
        }
    },
   methods: {
       accept (data) {
           this.valueChild = data ; // 接收子组件传递回来的值 并改变原有值
       }
   }
  

• 子组件中

  <template>
      <button @click ="closeDiv">关闭</button>
  </template>
  props: ['show'],
  methods: {
      closeDiv() {
          this.$emit('changeShow', false); // 发射新值到父组件
      }
  }
  

sync修饰符写法：

• 父组件中

  <myComponent :show.sync='valueChild' ></myComponent>
   data(){
       return{
           valueChild: true
       }
   }
  

• 子组件中

  <template>
      <button @click="closeDiv">关闭</button>
  </template>
  props: ['show'],
  methods: {
      closeDiv() {
          this.$emit('update:show', false); //触发 input 事件，并传入新值
      }
  }