如何简单理解 .sync修饰符

• 1. 父组件传递数据时，子组件用props接受 父组件里面有事件 可以改变 自身data里面的数据，然后通过props传递从而改变子组件的显示数据。
• 2. 但同时 子组件里面也可能有事件可以更新props传递过来的数据，不需要通过子组件的this.$emit(‘自定义事件名称’) 自定义事件来让父组件绑定@ 事件 从而改变 父组件里面的data数据。

这样会比较麻烦，因为这样的话 子组件派发的事件，要让父组件执行， .sync 修饰符就解决了 ，父组件不需要定义事件就能实现类似于 v-modle 这样的效果， 子组件也可以更新父组件里面的数据。

通过一个简单的案例：

思路：父组件的状态，通过props传递，父组件本身可以改变data里面的数据， 子组件也可以也有事件可以改变父组件里面的传过来的数据，其实的话是一种语法糖

父组件

<template>
  <div id="app">
    <myComponent :show.sync='valueChild' :data.sync='msg' style="padding: 50px 50px 30px 5px;border:1px solid red;margin-bottom: 10px;"></myComponent>
 其实是一种语法糖：
会被扩展为： <myComponent :show='valueChild' @update:show="val=>valueChild=val"></myComponent>

     <button @click="changeValue">toggle</button>
  </div>
  
</template>

<script>
import myComponent from './components/myComponent'

export default {
  name: 'app',
  components: {
    myComponent
  },
  data(){
        return{
            valueChild:true,
            msg:"xxx"
        }
    },
  methods:{
     changeValue(){
            this.valueChild = !this.valueChild
        },
       
  }
}

</script>

<style>

</style>

子组件

<template>
  <div v-if="show">
                    <p>默认初始值是{{show}}，所以是显示的</p>
                    <button @click.stop="closeDiv">关闭</button>
     <h1>{{data}}</h1>
                 </div>
</template>

<script>
export default {
  name: 'myComponent',
  data(){
    return {
    }
  },
   props:['show','data'],
  methods:{
     closeDiv() {
          this.$emit('update:show',false); //触发 input 事件，并传入新值
        }
  }
}
</script>


<style scoped>

</style>