Vue組件通訊

面試題,比較簡單的是

  • props,$emit
  • Vuex(Vuex用來傳值被認為與其“數(shù)據(jù)共享”的定位不太一樣)
  • $refs

還有幾種平時不太用的

  1. $parent $children,直接this.$parent就行,得到的是vm
  2. $attrs $listeners Vue2.4提供

一般配合屬性inheritAttrs一起使用,默認值為true。
當(dāng)父組件給子組件添加屬性,但子組件沒有用props接收時,inheritAttrs指定該屬性是否會被渲染到el.attributes上,true代表會。好像跟$attrs也沒關(guān)系,但是一般用$attrs的時候都會指定inheritAttrs為false。

$attrs $listeners適用于三級傳值,更多也行,但更多級用Vuex會比較方便。
以ABC為父子孫三級結(jié)構(gòu)。
A傳B兩條屬性——attr1、attr2,兩個響應(yīng)事件——ev1,ev2
B中用props接收attr1,則B的$attrs為attr2,也就是說$attrs的意思就是父傳值除掉props的那部分,當(dāng)需要進行跨級通訊時,就可以不設(shè)置中間組件的props,屬性就會一直傳遞下去。
比起$attrs的中間組件props會“消耗”屬性,$listener則不會有中間損失的情況。中間組件即便$emit觸發(fā)了事件,$listener也會將事件傳下去,且層級越深的組件越先觸發(fā)事件(BC都調(diào)用ev1,C的ev1先響應(yīng))。
B傳C為<C v-bind="$attrs" v-on="$listener"></C>

  1. provide inject 不推薦業(yè)務(wù)使用,但組件庫很常用

父組件提供變量,與data同級,寫法為:

{
  provide: {
    foo: 'bar'
  }
}

子組件通過inject: ['foo']接收,然后通過this.foo就可以訪問到;
寫法類似props,但是inject不受限于父子,只要屬于嵌套,子組件就能通過inject調(diào)用祖組件provide的值。

  1. EventBus 事件總線

有兩種寫法,一種是小范圍通訊,可以建立局部總線;或者掛到原型上,建立全局總線。
局部總線需要新建一個js文件,初始化為export const EventBus = new Vue(),使用類似于socket.io,發(fā)送方用EventBus.$emit('event', data),接收方用Event.$on('event', fn)。雙方均需引入該js。
全局總線則是在main.js中初始化:

var EventBus = new Vue();

Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

使用也類似,只不過不需要引入額外的js,用this.$bus代替EventBus即可。
事件總線通常用來作為兄弟組件的通訊手段。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 組件之間的通訊簡述:父子組件的關(guān)系可以總結(jié)為 props 向下傳遞,事件event向上傳遞祖先組件和后代組件(跨多...
    簡單tao的簡單閱讀 551評論 0 6
  • 組件化 vue組件系統(tǒng)提供了?種抽象,讓我們可以使?獨?可復(fù)?的組件來構(gòu)建?型應(yīng)?,任意類型的應(yīng)?界 ?都可以抽象...
    xin_滿眼xin辰閱讀 261評論 0 0
  • 有三種,分別是1、父組件向子組件傳值;2、子組件向父組件傳值;3、非父子組件傳值; 父向子傳值:父組件定義一個屬性...
    hudaren閱讀 172評論 0 0
  • vue組件傳參的八種方式 1:props/$emit 父組件通過props的方式向子組件傳遞數(shù)據(jù),而通過$emit...
    Master_Devil閱讀 133評論 0 0
  • 1、props 父傳子的屬性,props 值可以是一個數(shù)組或?qū)ο? 2、$emit 子傳父的方法 3、vuex v...
    alanwhy閱讀 396評論 0 0

友情鏈接更多精彩內(nèi)容