.sync 修饰符 和 .self 修饰符

.self 事件修饰符

• 场景：一个有遮罩的弹窗，点击遮罩关闭弹窗。因为遮罩在弹窗的外层，所以在外层加点击事件时，如何能点击弹窗部分不触发事件呢？
• 使用@click.self 可以只有点击自身时才触发点击事件

.sync 修饰符

• 场景：父组件向子组件传值，子组件有需要改变这个值；例如父组件有一个弹窗子组件，父组件传递show，点击弹窗关闭按钮改变show为false
  

// 子组件

<div>
   <button @click="close">关闭</button>
   <div v-show="show">子组件弹窗</div>
</div>
props: ["show"],
close() { // 方法名固定，必须是 update:参数名
   this.$emit("update:show", false);
},

// 父组件

// 1、传统方法：父子组件传值
<qu-button :show="show" @update:show="close"></qu-button>
// 2、可以简写为 参数名.sync
<qu-button :show.sync="show"></qu-button>
  data() {
    return {
      show: true,
    };
  },
  methods: {
    close() {
      this.show = false;
    },
  },