Vue:sync修饰符

1.作用

可以实现 子组件 与 父组件数据 的 双向绑定，简化代码

简单理解：子组件可以修改父组件传过来的props值

2.场景

封装弹框类的基础组件， visible属性 true显示 false隐藏

3.本质

.sync修饰符 就是 :属性名 和 @update:属性名 合写

4.语法

父组件

//.sync写法
<BaseDialog :visible.sync="isShow" />
//完整写法
<BaseDialog :visible="isShow" @update:visible="isShow = $event" />

子组件

props: {
  visible: Boolean
},

this.$emit('update:visible', false)

5.代码示例

// 父组件
<template>
  <div>
    <button @click="visible = true">显示</button>
    <!-- sync可以简化父子传值 -->
    <MyDialog :visible.sync="visible"></MyDialog>
    <!-- $event 用于在模板中，获取事件的形参 -->
    <!-- <MyDialog :visible="visible" @update:visible="visible=$event"></MyDialog> -->
    <!-- :属性.sync="变量" 等同于 :属性="变量" + @update:属性="xxx"-->
  </div>
</template>
data () {
  return {
    visible:false // 控制弹出框是否显示
  }
},

// 子组件弹窗
<template>
  <div class="dialog" v-show="visible">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close" @click="close">✖️</span>
    </div>
    <div class="dialog-content">我是文本内容</div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>
<script>
export default {
  props:["visible"],
  methods: {
    close() {
      // this.$emit('自定义事件名', false)
      this.$emit('update:visible', false)
    }
  }
</script>