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

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

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

 

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

     
          ...     
              {
   {node.text}}         ...
     

 

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

     
          ...       
                           
                            ...
     

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

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

 

3、C的模板：

     
          ...    
          ...
     

 

 

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