双向数据绑定

//单向数据流

  //子级
  <template>
    <div style="border: 5px solid blue;">
        <h2>{{ abc }}</h2>
        <button @click="handleUpdate">update</button>
    </div>
</template>

<script>
  export default {
    props: ['abc'],
    methods: {
        handleUpdate() {
            // 子传父  通过自定义事件的方式
            this.$emit('update:abc', '研究缝纫机的使用方式')
        }
    }
}
</script>

 //父级
 <DocText :title="text.title" @update:title="changeTitle" />

双向

 //子级 （子级中不需要事件函数和事件函数emit抛出了）
   <template>
    <div style="border: 5px solid blue;">
        <h2>{{ abc }}</h2>
    </div>
 </template>
 <script>
export default {
    props: ['abc'],
    methods: {
        handleUpdate() {
            // 子传父  通过自定义事件的方式
            // this.$emit('update', '研究缝纫机的使用方式')
            this.$emit('update:abc', '研究缝纫机的使用方式')
        }
    }
}
</script>

//父级
 <!-- v2 的props双向绑定写法 .sync修饰符可以对一个props属性进行双向绑定，让子组件可以修改传递过来的自定义属性了   .sync  就相当于是@update:title="changeTitle" -->
 
  <DocText :title.sync="text.title" />
  
  
  <!-- v3 的 props双向数据绑定 -->
    <DocText v-model:abc="text.title" />
    <p>{{ text.title }}</p>