vue實現雙向綁定的基礎方法

Vue2的組件props通信方式

在Vue2中組件的props的數據流動改為了只能單向流動，即只能由組件外（調用組件方）通過組件的DOM屬性attribute傳遞props給組件內，組件內只能被動接收組件外傳遞過來的數據，並且在組件內，不能修改由外層傳來的props數據。

 

 

比如要實現一個這樣的開關

1.父組件通過props將初始的值傳到子組件

2.子組件接收到初始值后，創建一個副本數據（由於從父組件直接獲取到的props不能更改，data中的數據可以更改，這才創建一個可以更改數據的副本）

props: [
    'checkType' // 當前checkBox的狀態，選中還是未選中
],
data () {
    return {
        myCheckType: this.checkType
    }
}

3.子組件創建一個監聽，在從父組件傳來的值改變的時候，重新給副本數據賦值

watch: {
    checkType (val) {
        this.myCheckType =  val
    }
}

4.子組件綁定改變事件，在觸發改變的時候，改變副本數據的值，並將改變后的值$emit給父組件

<img src="../../assets/images/icon_checkbox1_32^.png" @click="toggle">

methods: {
    toggle (status) {
        this.myCheckType = !this.myCheckType
        this.$emit('changeType', this.myCheckType)
        const event = window.event
        event.stopPropagation()
    }
}

5.父組件中監聽子組件$emit的事件，將子組件傳遞的值重新賦值給data

<form_list :checkType="test.checkType" @changeType="toggle"></form_list>

data () {
    return {
        test: {
            checkType: false
        }
    } 
},
methods: {
    toggle (data) { // data--子組件傳遞的值
        this.test.checkType = data
    }
}

6.在父組件中實現了值得改變，傳遞到子組件中

7.如果在循環中使用組件，子組件需要接收循環的索引；在子組件向父組件$emit的時候，數據中同時包括索引。

8.父組件能夠借助索引將子組件中要傳遞的數據插入該索引所在的數據集

 

本文參考如何在Vue2中實現組件props雙向綁定