vue 全局插槽全局插座

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

场景：

slot 能够让父组件内容插入到子组件中，但是子孙组件不能够使用slot直接插入内容。在弹窗的时候，全屏弹窗需要直接在组件最上层显示，如果父组件级别不够，弹出就可能不是全屏的。

知识点：

1： aa 为组件。父组件中<aa>我是子组件的slot</aa> ，子组件中console.log(this.$slots) // [Vnode] 打印的虚拟dom含有text：“我是子组件的slot”。尽管那句话不会渲染出来，但是它是存在在子组件slot中的，如果slot没有命名，默认为default

2：vm.$forceUpdate()能够强制刷新组件。

思路：

组件a 中slot内容全部返回到组件b中，渲染成组件b的内容.

应用：

上层组件： <global-slot />

任何子孙组件： <global-plug>这儿的任何内容会被显示在global-slot中，且这儿不会显示 </global-plug> 注：global-plug组件的this.$slots.default 就是虚拟dom

//global-blug.jsexport default {
install(Vue) { //引入该文件后直接Vue.use
let plug = {},
slot = {}
Vue.component("global-plug", { // 创建插槽
created() {
slot = this // 将此组件this保存到起来
},
render(createElement) { // 当运行render函数时，强制刷新 global-slot 组件因为global-slot组件的render函数会先运行。那时候slot是没有值的
plug.$forceUpdate()
}
}) Vue.component("global-slot", { // 创建插座
render(createElement) {
plug = this //将此组件this保存起来
return slot.$slots && slot.$slots.default[0] // 将上面的插槽组件的slot虚拟dom值返回到插座中来。
}
})
}
}