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.js

export 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值返回到插座中来。
      }
    })
  }
}

　升级：

　　在插座和插槽组件props 中传入属性，根据此属性的值，确认对应的插座和插槽。就如命名slot一样。

vue 全局插槽 全局插座

推荐阅读

vue 全局插槽全局插座