组件通信
父子
props
$children
$children
父组件可以通过$children访问子组件实现父子通信
this.$children
[1].sendToChild1();
$refs
this.$refs
.child2
.sendToChild1();
a
t
t
r
s
/
attrs/
attrs/listeners
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。当一个组件没有 声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外)，并且可以通过 v- bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
<p
>{{$attrs
.foo
}}</p
>
<HelloWorld foo
="foo"/>
子父
自定义事件
兄弟
$parent、 $root [兄弟节点之间可以通过共同祖辈搭桥]
this.$parent
.$on('foo', handle
)
this.$parent
.$emit('foo')
跨级
provide/inject
任意组件
vuexevent Bus
export default class Bus {
constructor() {
this.callbacks
= {}
}
$on(name
, fn
) {
this.callbacks
[name
] = this.callbacks
[name
] || [];
this.callbacks
[name
].push(fn
)
}
$emit(name
, args
) {
if (this.callbacks
[name
]) {
this.callbacks
[name
].forEach(cb
=> {
cb(args
)
});
}
}
}
作用域插槽
匿名插槽
<div
>
<slot
></slot
>
</div
>
<comp
>hello
</comp
>
具名插槽 [将内容分发到子组件具体位置]
<div
>
<slot
></slot
>
<slot name
="content"></slot
>
</div
>
<Comp2
>
<!-- 默认插槽用
default做参数
-->
<template v
-slot
:default>具名插槽
</template
> <!-- 具名插槽用插槽名做参数
-->
<template v
-slot
:content
>内容
...</template
>
</Comp2
>
作用域插槽[分发内容要用到子组件中的数据]
<div
>
<slot
:foo
="foo"></slot
>
</div
>
<Comp3
>
<!-- 把v
-slot的值指定为作用域上下文对象
-->
<template v
-slot
:default="slotProps"> 来自子组件数据
:{{slotProps
.foo
}} </template
>
<template v
-slot
:footer
="slotProps">{{slotProps
.fc
}}</template
>
</Comp3
>
组件实例化
vue.extendvue.component
export default function create(Component
, props
) {
const Ctor
= Vue
.extend(Component
)
const comp
= new Ctor({
el
: document
.createElement('div'),
propsData
: props
})
const $el
= comp
.$el
;
document
.body
.appendChild($el
);
Ctor
.prototype
.remove = () => {
const $el
= comp
.$el
;
document
.body
.removeChild($el
)
comp
.$destroy();
}
const vm
= new Vue({
render(h
) {
return h(Component
, { props
})
}
}).$mount()
****
document
.body
.appendChild(vm
.$el
)
const comp
= vm
.$children
[0]
comp
.remove = () => {
document
.body
.removeChild(vm
.$el
)
vm
.$destroy()
}
return comp
}
