在開發過程中遇到這樣一個問題，如何跨組件傳遞插槽。因為在開發類似樹組件的過程中，插槽需要通過外部傳遞到樹的根節點，然后通過根節點依次傳遞到各個葉子節點。那么如何把根節點的Slot如傳遞給子組件呢?我們在開發過程中，希望可以這樣實現重新定義葉子節點的結構：

<data-tree> <template v-slot:node='data'> <div>{{data.title}} - {{data.text}}</div> </template></data-tree>

那么如何在組件內傳遞Slot就是一個問題。

通過固定級別的組件結構里可以通過直接書寫<v-slot ...>來傳遞對應的Slot元素,來實現一層一層的傳遞。

<data-tree> <data-tree-item> <template :node='data'> <slot :data='data'> xxx </slot> </template> </data-tree-item></data-tree>

通過在外層創建slot可以逐層將slot進行傳遞，但是如果過多的嵌套層次，這樣就顯得很麻煩。

還有一種方案是通過Render函數來進行顯示，可以通過$slots來訪問當前組件的slot元素，然后通過Render函數創建新組件時，將slot傳遞給下一層。

h(’data-tree-item’,{ scopedSlots: { node: props => this.$slots.node(props) },})

這樣通過Render子元素就可以接受到對應的Slot,也實現了傳遞。

還有一種方式是通過動態組件，也是認為比較推薦的實現方式，不是通過傳遞Slot，而是通過子節點主動去獲取根節點的Slot對象，然后直接在UI中渲染出來。

為此我們需要創建一個組件來渲染對應的Slot對象。

首先需要獲取根節點:

const rootComponentName = ’data-tree’/** * 獲取父組件 */const getRootComponent = ( component: ComponentInternalInstance | null): ComponentInternalInstance | undefined => { if (component && component.type.name === rootComponentName) { return component } if (component && component.parent) { const parent = component.parent return getRootComponent(parent) }}

通過遞歸我們可以獲取到對應的父節點，這樣我們就可以把Slot作為Data暴露出來

setup(props) { // 獲取根節點 const dataTree = getRootComponent(getCurrentInstance()) const parentSlots = dataTree?.slots const nodeTemplate = parentSlots?.node as any return { nodeTemplate } }

這時候我們需要一個組件來渲染暴露出來的Slot:

components: { TemplateContainer: { functional: true, props: {template: { type: Function},data: { type: Object} }, render: (props, ctx) => h(’div’, [props.template(props.data)]) } }

好了現在該準備的都準備好了，可以去實現UI的顯示了：

<template-container v-if='nodeTemplate' :template='nodeTemplate' :data='node'></template-container><template v-else> {{ node.label }}</template>

這樣我們就實現了類似下面定義Slot的傳遞，也解決了我們跨組件傳遞Slot的問題。

<slot :data='node' name='node'> {{ node.label }}</slot>

本文使用的是Vue 3的事例，Vue 2也是相同的概念，在Vue 3中除了使用getRootComponent來查詢跟節點,也可以使用Provide/Inject來將Slot主動傳遞給子節點。

到此這篇關于Vue如何跨組件傳遞Slot的實現的文章就介紹到這了,更多相關Vue 跨組件傳遞Slot內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！