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"/>