vue slot传参,vue slot嵌套
本文主要介绍Vue跨组件交付Slot的实现。通过示例代码进行了非常详细的介绍，对大家的学习或者工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
在开发过程中，我遇到了这样一个问题，如何跨组件转移插槽。因为在开发树状组件的过程中，插槽需要对外传输到树的根节点，再通过根节点依次传输到各个叶节点。那么如何将根节点的槽传递给子组件呢？
在开发过程中，我们希望将叶节点的结构重新定义如下：
数据树
模板v-slot:node=data
div { { data . title } }-{ { data . text } }/div
/模板
/数据树
那么如何在组件中传递Slot就是一个问题。
嵌套传递
通过固定级组件结构，可以直接编写v-Slot.以转移相应的槽元件，从而实现逐层转移。
数据树
数据树项目
模板：节点=数据
slot :data=data xxx /slot
/模板
/数据树项目
/数据树
槽可以通过在外层创建槽来一层一层的转移，但是嵌套层次太多就麻烦了。
Render
另一种解决方案是通过Render函数来显示它。可以通过$slots访问当前组件的slot元素，然后在通过Render函数创建新组件时将slot传递给下一层。
h(数据树项目，{
scopedSlots: {
节点：道具=这个。$slots.node(props)
},
})
这样就可以通过Render子元素接收到相应的槽位，也实现了传输。
动态组件
另一种方式是通过动态组件，这也是一种推荐的实现方式。不是通过槽，而是通过子节点主动获取根节点的槽对象，然后直接在UI中渲染。
为此，我们需要创建一个组件来呈现相应的插槽对象。
首先，您需要获得根节点：
const root component name= data-tree
/**
*获取父组件
*/
const getRootComponent=(
组件：ComponentInternalInstance null
):component internal instance undefined={
if(component component . type . name===root component name){
返回组件
}
if (component component.parent) {
const parent=component.parent
返回getRootComponent(父级)
}
}
通过递归，我们可以得到对应的父节点，这样我们就可以把槽公开为数据。
设置(道具){
//获取根节点
const dataTree=getroot component(getCurrentInstance())
const parentSlots=dataTree？时间
const nodeTemplate=parentSlots？任意节点
返回{
节点模板
}
}
这时我们需要一个组件来呈现暴露的插槽：
组件：{
模板容器：{
功能性：真的，
道具：{
模板：{
类型：功能
},
数据：{
类型：对象
}
},
render: (props，ctx)=h(div ，[props.template(props.data)])
}
}
好了，现在一切都准备好了，可以显示UI了：
模板容器
v-if=nodeTemplate
:template=nodeTemplate
:data=node
/模板-容器
模板v-else
{{ node.label }}
/模板
这样我们实现了类似下面定义的Slot的交付，也解决了我们跨组件交付Slot的问题。
插槽：数据=节点名称=节点
{{ node.label }}
/插槽
本文用的是Vue 3的例子，Vue 2是同一个概念。在Vue 3中，除了使用getRootComponent查询下面的节点，还可以使用Provide/Inject主动将Slot转移到子节点。
这就是这篇关于Vue如何实现跨组件交付槽的文章。有关Vue跨组件交付插槽的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。