Vue中 .sync修饰符与$emit(update:xxx)

.sync 我们以前讲过和v-model 作用差不多
其实就是一个语法糖

.sync

<my-input :visible.sync="isVisible" />

这其实也是一个语法糖

<my-input :visible="isVisible" 
@update:visible="newVisible => isVisible = newVisible"
/>

我们看到这里有@update 的方法
那么 子组件的emit 方法就是 与$emit(‘update:visible’,newVisible )
通过这么解析 我们就知道 .sync 修饰符与 $emit(update:xxx)的关系了
我们通过代码进一步说明
子组件：

<template>
  <div v-if='show'>
      <p>{{show}}</p>
      <button @click.stop="close">关闭</button>
  </div>
</template>
<script>
import Vue from 'vue'
export default{
  props:['show']
  methods:{
      close() {
        this.$emit('update:show', false); //触发 input 事件，并传入新值
      }
  }
}
</script>

父组件：

<template>
  <div>
      <myComponent :show.sync='valueChild'></myComponent>
      <button @click="changeValue">change</button>
  </div>
</template>
<script>
import Vue from 'vue'
export default{
  data(){
      return{
          valueChild:true,
      }
  },
  methods:{
      changeValue(){
          this.valueChild = !this.valueChild
      }
  }
}
</script>

vue click.stop阻止点击事件继续传播