Vue 子组件与父组件之间的 双向数据绑定

方法一（常规）

1. 父组件传递数据到子组件；
2. 子组件将数据转成本地数据

props: ['name'],
data() {
    return {
        iName: this.name
    }
},

3. 但是此时，父组件如果更新了name 值，但是子组件中的 iName 不会随之更改；所以要监听父组件传入数据的变化，随之更新子组件；

watch: {
    // 监听父组件传入的数据，更新到本地
    name(newVal, oldVal){
        this.iName = newVal;
    }
},

4. 此时，父组件更新 name ，子组件展示出来的数据（iName）会随之变化，但是子组件修改数据，父组件不会变化，所以需要监听子组件数据（iName）的变化，通知父组件进行更新

// 子组件中的监听
watch: {
    // 监听父组件传入的数据，更新到本地
    name(newVal, oldVal){
        this.iName = newVal;
    },
    // 监听本地数据的变化，通知父组件更新
    iName(newVal, oldVal) {
        this.$emit('update', newVal);
    }
},

// 父组件中的更新
<test :name="name" @update="update"/>
methods: {
    update(str) {
        this.name = str;
    }
},

方法二（自定义 v-model 双向数据绑定）

自定义组件中使用 v-model 进行双向数据绑定，相当于；

<test v-model="selected" /> 
相当于
<test :value="selected" @input="data=> selected=data"/>


所以子组件需要做的事情就是
1.  接收 value 数据
    props: ['value'],
2.  将value 转成本地数据
	data() {
	    return {
	        checked: this.value
	    }
	},
3. 监听 value 的变化，更新到本地数据，
   监听 本地数据的变化，使用 input 事件通知父组件更新
	watch: {
	    value(newVal){
	        this.checked = newVal;
	    },
	    checked(newVal){
	        this.$emit('input', newVal)
	    }
	},

方法三（.sync 修饰符）

<input :title.sync="xx"/>

拆开后

<input @update:title="data => xx=data" :title="xx"/>