vue實現雙向繫結的基礎方法

2022-07-18 23:48:20 字數 1297 閱讀 8899

在vue2中元件的props的資料流動改為了只能單向流動,即只能由元件外(呼叫元件方)通過元件的dom屬性attribute傳遞props給元件內,元件內只能被動接收元件外傳遞過來的資料,並且在元件內,不能修改由外層傳來的props資料。

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

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

2.子元件接收到初始值後,建立乙個副本資料(由於從父元件直接獲取到的props不能更改,data中的資料可以更改,這才建立乙個可以更改資料的副本)

1

props: [

2 'checktype' //

當前checkbox的狀態,選中還是未選中3],

4data ()

8 }

3.子元件建立乙個監聽,在從父元件傳來的值改變的時候,重新給副本資料賦值

1

watch:

5 }

4.子元件繫結改變事件,在觸發改變的時候,改變副本資料的值,並將改變後的值$emit給父元件

<

img

src="../../assets/images/icon_checkbox1_32^.png"

@click

="toggle"

>

1

methods:

8 }

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

<

form_list

:checktype

="test.checktype"

@changetype

="toggle"

>

form_list

>

1

data () 6}

7},8methods:

12 }

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

7.如果在迴圈中使用元件,子元件需要接收迴圈的索引;在子元件向父元件$emit的時候,資料中同時包括索引。

8.父元件能夠借助索引將子元件中要傳遞的資料插入該索引所在的資料集

本文參考如何在vue2中實現元件props雙向繫結

VUE基礎(4) 實現雙向繫結

一 vue是如何實現雙向繫結的?利 object.defineproperty 劫持物件的訪問器,在屬性值發 變化時我們可以獲取變化,然後根據變化進 後續響應 在 vue3.0中通過proxy 物件進 類似的操作 這是將要被劫持的物件 const data function say name els...

VUE基礎(4) 實現雙向繫結

一 vue是如何實現雙向繫結的?利 object.defineproperty 劫持物件的訪問器,在屬性值發 變化時我們可以獲取變化,然後根據變化進 後續響應 在 vue3.0中通過proxy 物件進 類似的操作 這是將要被劫持的物件 const data function say name els...

vue雙向繫結實現原理

當我們學會使用乙個東西的時候,就開始想要去知道這個東西是怎麼實現的,這個也是我們一直繼續 下去的動力,博主學了vue的時間也比較長了,自己也寫了乙個demo,還在不定時更新,有興趣的小夥伴可以去看看,如果這個專案能讓您有所收穫,那也是博主希望看到的,接下來也是聊聊自己開始學習vue一些實現原理的過程...