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。