Vue — .sync修饰符的使用

.sync修饰符

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

特点： prop属性名，可以自定义，非固定value

使用场景 ： 封装弹窗类的基础组件，添加自定义 属性  使用true/false控制

本质： 就是 :属性名 和 @update:属性名 合写

<template>
  <div class="app">

    <button @click="open">
      open
    </button>
//1.在父组件的子组件标签使用.sync修饰符 绑定一个属性
    <SyncDemoVue :toggleSon.sync="isShow"></SyncDemoVue>
  </div>
</template>

<script>
import SyncDemoVue from './components/SyncDemo.vue'

export default {
  name: 'App',
  components: {
    SyncDemoVue
  },
  data(){
    return {
      isShow : false
    }
  },
  methods : {
    open(){
      this.isShow = true
    }
  }
}
</script>

<template>
  <div class="demo" v-show="toggleSon">

     <button @click="changeToogle">close</button>
  </div>
</template>

<script>
export default {
    props : {
        toggleSon : Boolean
    },
    methods:{
        changeToogle(){
       //2.在子组件传递数据时 绑定的方法名 update:属性名
            this.$emit('update:toggleSon',false)
        }
    }
}
</script>