slot传函数 vue_Vue如何跨组件传递Slot的实现

在开发过程中遇到这样一个问题，如何跨组件传递插槽。因为在开发类似树组件的过程中，插槽需要通过外部传递到树的根节点，然后通过根节点依次传递到各个叶子节点。那么如何把根节点的Slot如传递给子组件呢?

我们在开发过程中，希望可以这样实现重新定义叶子节点的结构：

{ {data.title}} - { {data.text}}

那么如何在组件内传递Slot就是一个问题。

嵌套传递

通过固定级别的组件结构里可以通过直接书写来传递对应的Slot元素,来实现一层一层的传递。

xxx

通过在外层创建slot可以逐层将slot进行传递，但是如果过多的嵌套层次，这样就显得很麻烦。

Render

还有一种方案是通过Render函数来进行显示，可以通过$slots来访问当前组件的slot元素，然后通过Render函数创建新组件时，将slot传递给下一层。

h("data-tree-item",{

scopedSlots: {

node: props => this.$slots.node(props)

},

})

这样通过Render子元素就可以接受到对应的Slot,也实现了传递。

动态组件

还有一种方式是通过动态组件，也是认为比较推荐的实现方式，不是通过传递Slot，而是通过子节点主动去获取根节点的Slot对象，然后直接在UI中渲染出来。

为此我们需要创建一个组件来渲染对应的Slot对象。