vue中父子元件通訊的坑

2022-01-13 15:41:20 字數 815 閱讀 2881

**:

當在乙個元件中,使用了其他自定義元件時,就會利用子元件的屬性和事件來和父元件進行資料交流。

父子元件之間的通訊就是 props down,   events up,父元件通過 屬性props向下傳遞資料給子元件,子元件通過事件 events 給父元件傳送訊息

子元件需要某個資料時,就在內部定義乙個prop屬性,父元件就像給html元素指定特定值一樣,把自己的data屬性傳遞給子元件的這個屬性。

而子元件內部發生什麼事情的時候,就通過自定義事件來把這個事情涉及到的資料暴露出來,供父元件處理。

以上**中,foo是 元件內部定義的prop屬性,baz 是父元件的乙個data屬性,event是子元件定義的乙個事件,dothis是父元件的乙個方法。

父元件把baz資料通過prop傳遞給子元件的foo

子元件內部得到foo的值,就可以進行相應的操作;

當子元件內部發生了一些變化,希望父元件能知道時,就利用**觸發event-a事件,把一些資料傳送出去;

父元件把這個事件處理器繫結為dothis方法,子元件傳送的資料,就作為dothis方法的引數被傳進來;

然後父元件就可以根據這些資料,進行相應的操作。

Vue中父子元件通訊 元件todolist

提交 button div ul li v for item,index of list key index li ul div script newvue methods script view code 定義元件,元件和元件之間通訊 div id root div input type text...

Vue父子元件通訊

1.父與子通訊,通過屬性傳遞值,如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...

vue父子元件通訊

一 父元件利用props往子元件傳輸資料 父元件 注意傳遞引數時要用 代替駝峰命名,html不區分大小寫 子元件 vue.component child template 二 子元件向父元件傳遞引數利用事件機制 子元件通過this.emit 派發事件,父元件利用v on對事件進行監聽,實現引數的傳遞...