vue2 父子組件實現雙向綁定

vue2的版本:"2.5.2"

子組件中TestBiBind

this.$emit('update:multiple222', count++)

父組件中

<TestBiBind   :multiple222="multiple" @update:multiple222="val => multiple = val"></TestBiBind>

注意 at後面的字符串要和子組件中this.$emit 的第一個參數相同.

 

父組件中更優雅的方式

<TestBiBind  :multiple222.sync="multiple" ></TestBiBind>

vue2文檔說明以下:

從 2.3.0 起咱們從新引入了 .sync 修飾符，可是此次它只是做爲一個編譯時的語法糖存在。它會被擴展爲一個自動更新父組件屬性的 v-on 監聽器。

以下代碼

<comp :foo.sync="bar"></comp>

會被擴展爲：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

當子組件須要更新 foo 的值時，它須要顯式地觸發一個更新事件：

this.$emit('update:foo', newValue)