Vue元件常用的6種通訊方式

2022-09-13 09:06:08 字數 1508 閱讀 1873

vue.js元件例項的作用域是相互獨立的,不同元件之間的資料不能相互訪問,元件有父級元件、子級元件、兄弟元件、如何選擇元件之間的通訊方式?

針對常用的props、$emit / $on、$parent / $children、$attrs / $listener 、provide / inject 進行講解,對比各自的區別以及使用場景。

1. props

子元件使用props接收父元件傳遞的值,子元件通過$emit ,讓父元件接收事件,改變父元件的data裡面的值。

例子:

子元件通過事件向父元件傳遞值,父元件更改自己的資料,子元件接收更改後的值;

2. $emit / $on

通過vue 的例項觸發事件和監聽事件,實現了跨級元件的通訊;

例子:在元件b中監聽固定的事件名,當a元件觸發change事件後,監聽到事件觸發,觸發事件時機不確定,一版在created 或 mounted 中監聽事件;

3. vuex

vuex是乙個單向的資料流的狀態管理模式,state存放資料,當需要改變state的資料時,只能通過mutation更改。

4. $parent / $children

$parent / $children 可以訪問到父元件或子元件的例項,通過 $ref 也可以獲取到子元件的例項,可以訪問子元件的例項和方法;

this.$attrs 包含了父作用域中不作為prop被識別的特性繫結(class和style除外),解釋就是,父元件傳遞了props ,但是子元件沒有全部使用props 接收,沒被子元件接收的那些props,在$attrs中就可以獲取到;$listeners 即是包含了父作用域中的(不含.native修飾器的)v-on 事件***,可以使用 v-on='$listeners'傳入到內部元件;在跨級元件中傳遞屬性和事件非常有用;

祖先元件通過 provide 向子孫級元件提供乙個物件或返回乙個物件的函式,該物件包含可以注入子元件的屬性。

需要注意的是 provide 和 inject 繫結並不是可響應的;這是刻意為之的。然而,如果你傳入了乙個可監聽的物件,那麼其物件的屬性還是可響應的。

總結:父子級通訊推薦使用:props/$emit、$parent/$children/$refs、$attrs/$listeners

vue 元件間通訊的6種方式

父元件通過 props 將資料傳給子元件,子元件通過 emit 將資料按照 events 的形式傳送給父元件。這種方法通過乙個空的 vue 例項作為 事件匯流排 事件中心 用它來觸發事件和監聽事件,巧妙而輕量地實現了任何元件間的通訊,包括父子 兄弟 跨級。當我們的專案比較大時,可以選擇更好的狀態管理...

vue元件通訊7種方式

parent.vue title child.vue props parent.vue changetitle child.vue this.emit changetitle bubuzou.com vue 2.4 父元件 index.vue class list box title 標題 desc...

整理4種Vue元件通訊方式

重點是梳理了前兩個,父子元件通訊和eventbus通訊,我覺得vue文件裡的說明還是有一些簡易,我自己第一遍是沒看明白。1.引入子元件 import counter from counter import son from son 2.在ccmponents裡註冊子元件 components 3.在...