Vue 元件通訊

2022-03-07 06:58:36 字數 712 閱讀 4053

今天寫一下元件通訊,總結一下對元件通訊的理解

元件通訊分為:1、父子通訊 2、子父通訊 3、非父子通訊

1、子父通訊

子父通訊主要用到 props屬性

a)在子元件中新增props屬性

}

b)在子模板中直接使用props(和使用data一樣)

c)在父元件的元件模板中找到子元件標籤,新增屬性:

《子元件標籤 :自定義props名字="父元件中的data中的值">2、子父通訊

a)在子元件中找到對應的元素新增相關事件,在事件函式中觸發自定義事件

}}

b)在父元件methods中新增函式

}}

c)在父元件元件模板中找到子元件標籤新增自定義事件

《子元件標籤 @自定義事件名="父元件中的函式名">3、非父子通訊

a)建立乙個公共的例項(選一乙個即可)

const bus = new vue()

b)在傳送資料的元件中的對應的元素上新增事件

@click="函式名"   //函式中觸發自定義事件

} }

c)在接受資料的元件中新增created,然後監聽事件的觸發

created())  

}

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...

vue元件通訊

這部分vue文件已經說的很清楚了,但是為了更好的理解,自己再整理一遍。首先,父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時,想要通知父元件應該怎麼辦呢?父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說,就是子元件監聽的事件,在函式內使用 emit...

Vue元件通訊

父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件,改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...