深入理解vue 修饰符sync

<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @Date: 2020-05-13 14:52:34
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-01-29 14:27:02
-->

<template>
  <div>
    <h1>标题:{{ title }}</h1>
    <!-- <textcom v-on:update:titleList="title = $event"></textcom> -->
    <!-- 为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符： -->
    <textcom :titleList.sync="title"></textcom>
  </div>
</template>

<script>
import Vue from "vue";
Vue.component("textcom", {
  template: `<div>
                  <span>我是子组件</span>
                  <button @click="sendmessage">子组件向父组件传值</button>
              </div>`,
  data() {
    return {
      newTitle: "我是来自子组件的数据",
    };
  },
  methods: {
    sendmessage() {
       this.$emit("update:titleList", this.newTitle);
    },
  },
});
export default {
  data() {
    return {
      title: "",
    };
  },
};
</script>

<style>
</style>

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们也可以props传初始值，然后事件监听，从而实现子组件向父组件传值。