Vue跨层级传递slot的方法

由于业务须要，咱们的vue组件分了不少层。但我须要在父组件经过slot指定模板，但不在子组件渲染，而是在孙组件或是再下方的组件去渲染。

好比，我有一个通用的A组件，A组件内引用了B组件，B组件又引用了C组件。C组件的模板内有一部分是须要在A组件中来配置的。

由于中间间隔了1层以上的组件，因此无法经过通常的slot方式解决。因而研究了一下vue的scoped-slots，感慨vue的设计真是很灵活，能够很方便实现。

 

一、首先，引用A组件的模板：

<div> ...
 <A> <span slot="nodeMenu" slot-scope="{node}">{{node.text}}</span>
 </A> ... </div>

 

2.一、若是B组件是模板方式，引用B组件的模板：

<div> ...
 <B> <span slot="nodeMenu" slot-scope="{node}">
            <slot name="nodeMenu" :node="node"></slot>
         </span>
 </B> ... </div>

2.二、若是B组件是经过render的脚本方式渲染的，能够这样：

render(h){ return h(ComponentC, { props: { ... }, scopedSlots: self.$scopedSlots, on: { ... } }) }

 

三、C的模板：

<div v-for="treeNode in nodes"> ... <slot name="nodeMenu" :node="treeNode"></slot> ... </div>

 

 

经过分析Vue源码，Vue的scopedSlots中是一个个渲染函数（并非VNode）。在B组件中经过这些函数传递给C组件，从而实现了跨层传递slots。