v-bind.sync的使用

v-bind.sync

1. 在子组件中我们不能直接修改父组件传过来的prop值，一般情况下通过$emit传递事件，然后在父组件中监听这个事件，再在事件中修改这个prop值。v-bind.sync可以理解为是这种方式的语法糖。
2. 在父组件v-bind.sync可以实现props的双向绑定
3. v-bind.sync与v-model的区别？

• 一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个。

• v-model针对更多的是最终操作结果，是双向绑定的结果，是value，是一种change操作。

• v-bind.sync针对更多的是各种各样的状态，是状态的互相传递，是status，是一种update操作。

父组件

<template>
  <div>
    <comp2 v-bind.sync="propsObj"></comp2>
  </div>
</template>

<script>
// import comp from './comp.vue'
import comp2 from './comp2.vue'
export default {
  name: 'Class2',
  props: {},
  components: { comp2 },
  watch: {
    // searchText(old,newValue) {
    //   console.log(this.searchText);
    //   console.log(old,newValue);
    // }
  },
  data() {
    return {
      propsObj: {
        title:'一个标题',
        name: 'wang'
      }
    }
  }
}
</script>

子组件

<template>
  <div>
    <h1 @click="handleClick">父组件传来的标题: {{title}}</h1>
    <h1 @click="changeName">{{name}}</h1>
  </div>
</template>

<script>
// import comp 
export default {
  name: 'Comp2',
  props: {
  	// propsObj 对象里的属性分开写
    title: String,
    name: String
  },
  components: {},
  data() {
    return {
      // value: ''
    };
  },
  computed: {
  },
  methods: {
    handleClick(e) {
      this.$emit('update:title', '新标题')

      // this.$emit('click', '新标题')
    },
    changeName() {
      this.$emit('update:name', '新的名字')
    }
  },

}
</script>

点击触发事件后