vue .sync修饰符的用法

场景：子组件需要通过修改父组件传递过来的prop去改变父组件的状态的时候，即父子组件实现双向绑定。

原理：在父组件里监听到了update这个事件，并且更新了传递过来的prop的值。

父组件

<template>
    <div>
        {{text}}
        <button @click="handleChange">点我改变内容</button>
        <SyncData :textData.sync="text"/> 
    </div>
</template>
<script>
import SyncData from './components/syncData.vue';
    export default {
        components: {
            SyncData
        },
        data () {
            return {
                text: "我是父组件"
            }
        },
        methods: {
            handleChange() {
                this.text = '我还是父组件'
            }
        }
    }
</script>

 子组件

<template>
  <div>
    <button @click="changeText">
      点我改变父组件的值
    </button>
  </div>
</template>

<script>
export default {
  props: ["textData"],
  methods: {
    changeText() {
        this.$emit('update:textData', '我是子组件')
    }
  }
};
</script>

.sync实际上是语法糖，完整的写法是：

<template>
    <div>
        {{text}}
        <button @click="handleChange">点我改变内容</button>
        <SyncData :textData.sync="text"/>
<!-- 因为子组件里使用$emit是回调函数，所以子组件传的值就是这里的value -->
        <!-- <SyncData v-bind:textData="text" v-on:update:textData="value => text = value"/> -->
        <!-- <SyncData :textData="text" @update:textData="text=$event"/> -->
    </div>
</template>
<script>
import SyncData from './components/syncData.vue';
    export default {
        components: {
            SyncData
        },
        data () {
            return {
                text: "我是父组件"
            }
        },
        methods: {
            handleChange() {
                this.text = '我还是父组件'
            }
        }
    }
</script>