Vue跨层级传递slot的方法

因为业务需要，我们的vue组件分了很多层。但我需要在父组件通过slot指定模板，但不在子组件渲染，而是在孙组件或是再下方的组件去渲染。

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

因为中间间隔了1层以上的组件，所以没法通过一般的slot方式解决。于是研究了一下vue的scoped-slots，感慨vue的设计真是很灵活，可以很方便实现。

1、首先，A组件的模板：

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

2.1、如果B组件是模板方式，B组件的模板：

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

2.2、如果B组件是通过render的脚本方式渲染的，可以这样：

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

3、C的模板：

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

扫描二维码关注公众号，回复： 71541 查看本文章

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