面试题,比较简单的是
- props,$emit
- Vuex(Vuex用来传值被认为与其“数据共享”的定位不太一样)
- $refs
还有几种平时不太用的
-
$parent $children
,直接this.$parent就行,得到的是vm -
$attrs $listeners
Vue2.4提供
一般配合属性inheritAttrs一起使用,默认值为true。
当父组件给子组件添加属性,但子组件没有用props接收时,inheritAttrs指定该属性是否会被渲染到el.attributes上,true代表会。好像跟$attrs也没关系,但是一般用$attrs的时候都会指定inheritAttrs为false。
$attrs $listeners
适用于三级传值,更多也行,但更多级用Vuex会比较方便。
以ABC为父子孙三级结构。
A传B两条属性——attr1、attr2,两个响应事件——ev1,ev2
B中用props接收attr1,则B的$attrs为attr2,也就是说$attrs的意思就是父传值除掉props的那部分,当需要进行跨级通讯时,就可以不设置中间组件的props,属性就会一直传递下去。
比起$attrs的中间组件props会“消耗”属性,$listener则不会有中间损失的情况。中间组件即便$emit触发了事件,$listener也会将事件传下去,且层级越深的组件越先触发事件(BC都调用ev1,C的ev1先响应)。
B传C为<C v-bind="$attrs" v-on="$listener"></C>
-
provide inject
不推荐业务使用,但组件库很常用
父组件提供变量,与data同级,写法为:
{
provide: {
foo: 'bar'
}
}
子组件通过inject: ['foo']接收,然后通过this.foo就可以访问到;
写法类似props,但是inject不受限于父子,只要属于嵌套,子组件就能通过inject调用祖组件provide的值。
-
EventBus
事件总线
有两种写法,一种是小范围通讯,可以建立局部总线;或者挂到原型上,建立全局总线。
局部总线需要新建一个js文件,初始化为export const EventBus = new Vue()
,使用类似于socket.io,发送方用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即可。
事件总线通常用来作为兄弟组件的通讯手段。