面試題,比較簡單的是
- props,$emit
- Vuex(Vuex用來傳值被認為與其“數(shù)據(jù)共享”的定位不太一樣)
- $refs
還有幾種平時不太用的
-
$parent $children,直接this.$parent就行,得到的是vm -
$attrs $listenersVue2.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>
-
provide inject不推薦業(yè)務(wù)使用,但組件庫很常用
父組件提供變量,與data同級,寫法為:
{
provide: {
foo: 'bar'
}
}
子組件通過inject: ['foo']接收,然后通過this.foo就可以訪問到;
寫法類似props,但是inject不受限于父子,只要屬于嵌套,子組件就能通過inject調(diào)用祖組件provide的值。
-
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即可。
事件總線通常用來作為兄弟組件的通訊手段。