个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
32
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章Vue如何跨组件传递Slot的实现由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
在开发过程中遇到这样一个问题，如何跨组件传递插槽。因为在开发类似树组件的过程中，插槽需要通过外部传递到树的根节点，然后通过根节点依次传递到各个叶子节点。那么如何把根节点的Slot如传递给子组件呢? 我们在开发过程中，希望可以这样实现重新定义叶子节点的结构:
|
1
2
3
4
5
|
<data-tree>
<template v-slot:node=
"data"
>
<div>{{data.title}} - {{data.text}}</div>
</template>
</data-tree>
|
那么如何在组件内传递Slot就是一个问题.
通过固定级别的组件结构里可以通过直接书写<v-slot ...>来传递对应的Slot元素,来实现一层一层的传递.
|
1
2
3
4
5
6
7
|
<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传递给下一层.
|
1
2
3
4
5
|
h(
'data-tree-item'
,{
scopedSlots: {
node: props =>
this
.$slots.node(props)
},
})
|
这样通过Render子元素就可以接受到对应的Slot,也实现了传递.
还有一种方式是通过动态组件，也是认为比较推荐的实现方式，不是通过传递Slot，而是通过子节点主动去获取根节点的Slot对象，然后直接在UI中渲染出来.
为此我们需要创建一个组件来渲染对应的Slot对象.
首先需要获取根节点
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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暴露出来 。
|
1
2
3
4
5
6
7
8
9
|
setup(props) {
// 获取根节点
const dataTree = getRootComponent(getCurrentInstance())
const parentSlots = dataTree?.slots
const nodeTemplate = parentSlots?.node as any
return
{
nodeTemplate
}
}
|
这时候我们需要一个组件来渲染暴露出来的Slot
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
components: {
TemplateContainer: {
functional:
true
,
props: {
template: {
type: Function
},
data: {
type: Object
}
},
render: (props, ctx) => h(
'div'
, [props.template(props.data)])
}
}
|
好了现在该准备的都准备好了，可以去实现UI的显示了:
|
1
2
3
4
5
6
7
8
|
<template-container
v-
if
=
"nodeTemplate"
:template=
"nodeTemplate"
:data=
"node"
>
</template-container>
<template v-
else
>
{{ node.label }}
</template>
|
这样我们就实现了类似下面定义Slot的传递，也解决了我们跨组件传递Slot的问题.
|
1
2
3
|
<slot :data=
"node"
name=
"node"
>
{{ node.label }}
</slot>
|
本文使用的是Vue 3的事例，Vue 2也是相同的概念，在Vue 3中除了使用getRootComponent来查询跟节点,也可以使用Provide/Inject来将Slot主动传递给子节点.
到此这篇关于Vue如何跨组件传递Slot的实现的文章就介绍到这了,更多相关Vue 跨组件传递Slot内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://juejin.cn/post/6905280645115674632 。
最后此篇关于Vue如何跨组件传递Slot的实现的文章就讲到这里了,如果你想了解更多关于Vue如何跨组件传递Slot的实现的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
32
4
0
背景: 我最近一直在使用 JPA，我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。 我们公司使用大量非 SQL 数据库，特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
我已经在我的 maven pom 中添加了这些构建配置，因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。 允许在行(实体)中进行迭代，并在对当前
好像没有，因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情，要么这不应该发
在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？如果是，是因为 LSP 吗？之间有什么区别吗: 1. Interface IX; Class A : IX;
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0
我将把国际象棋游戏表示为 C++ 结构。我认为，最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。 这是一个好的方法吗？ struct TreeElement{ SomeMoveType
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名，然后检查用户名是否已被占用。如果采用该方法，则该方法应该返回带有数据库中未采用的数字的用户名。 例子: “贾
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象，并且我有一个二维数组来保存两个给定顶点
我目前正在 ika 中开发我的 Python 游戏，它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而，我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏，但我想供应 4-
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。 它必须能够将信息发布到 DHT 并检索它。 最佳答案 OpenDHT是
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时，它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!？ 最佳答案 “C++ 实现”是指编译器加上链接
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印
在很多情况下，我需要在 C# 中访问合适的哈希算法，从重写 GetHashCode 到对数据执行快速比较/查找。 我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是，我从未见过 C# 实现的
目录 LRU缓存替换策略 核心思想 不适用场景 算法基本实现 算法优化
1. 绪论 在前面文章中提到 空间直角坐标系相互转换 ，测绘坐标转换时，一般涉及到的情况是：两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中，WGS-84坐标系、54北京坐标系
在软件开发过程中，有时候我们需要定时地检查数据库中的数据，并在发现新增数据时触发一个动作。为了实现这个需求，我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .
二分查找 二分查找算法，说白了就是在有序的数组里面给予一个存在数组里面的值key，然后将其先和数组中间的比较，如果key大于中间值，进行下一次mid后面的比较，直到找到相等的，就可以得到它的位置。
我是一名优秀的程序员,十分优秀！