<h4><strong>一、背景</strong></h4> 讯享网
1.1、对于开发可扩展组件非常有用，特别是大型项目；
1.2、匿名slot 适用于只插入一个的时候；
1.3、具名slot 可清晰的插入多个slot，按name匹配使用；
1.4、在slot的内部可以将值通过有名slot传递出去，让外层组件接收，常用于表格展示；
通俗理解：
“占坑”，在组件模板中预定位置（一个或多个），使用该组件时，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ”mySlot ” 的元素就会替换该对应位置内容；
二、匿名插槽
子组件：
<slot></slot>
父组件：
<slot style=“color:blue;”>我是匿名插槽</slot>
注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；
三、具名插槽
子组件：
<slot name=“slotTest2”></slot>
父组件：
<div name=“slotTest2”>
<span style=“color:red;”>我是具名插槽</span>
</div>
三、作用域插槽
理解：
作用域插槽在子组件中把“当前数据”传递给父组件，父组件接收，对接收到的数据进行符合业务逻辑、代码逻辑的处理，展示出想要的数据。
子组件：
<!– 作用域插槽 –>
<div v-for=“(item, index) in list” :key=“index”>
<slot name=“slotTest3” :item=“item”></slot>
</div>
父组件：
<!– 作用域插槽 –>
<template #slotTest3=“scope”>
<div>{{scope}}</div>
<div>{{scope.item.name}}</div>
</template>
效果：
四、完整代码
子组件代码
讯享网
父组件代码：
五、插槽 <template> 可以循环吗
可以
template可以循环，但是不能有key，内部元素可以有key
讯享网
六、插槽的 template 为什么不能有 key
在Vue或类似的前端框架中， 属性的主要用途是在使用 指令渲染列表时，给每个节点提供一个唯一的标识符，以便Vue能够跟踪每个节点的身份，从而重用和重新排序现有元素。然而， 属性并不是为 标签设计的，这主要是基于几个原因：
标签的用途： 标签在Vue中主要用于声明性地描述一段将要被Vue的渲染函数转换成渲染结果的HTML模板。它不会被渲染成真实的DOM元素，而是作为一个包装元素，用于包裹多个子元素。因此，给 标签添加 属性在逻辑上并不合理，因为它本身不会作为DOM树的一部分。
的作用范围： 是用来给 循环中的每个元素提供唯一标识的，以帮助Vue识别每个节点的身份，从而高效地更新DOM。而 标签下的内容，如果包含 ，则 应该直接应用于 循环的根元素上，而不是 本身。
6.3、Vue的渲染机制：Vue在渲染过程中，会遍历组件的虚拟DOM树，并将其转换为真实的DOM。在这个过程中， 属性的存在与否及其值会影响Vue如何识别和更新DOM节点。但是，因为 标签不是真实的DOM元素，所以给它设置 并不会影响Vue的渲染过程。
6.4、实践中的用法：在实际开发中，如果你需要在 循环中使用 来包裹多个元素，你应该将 添加到 循环的根元素上，而不是 。这样做可以确保Vue能够正确地跟踪和更新这些元素。
注意，上面的第一个示例是错误的，因为 上不能添加 。第二个示例是正确的，它将 添加到了 循环的根元素 上。
七、欢迎交流指正
八、参考链接
http://lanwuyaojiu.cn/blogm/blogart-113.html
Vue中slot的使用（通俗易懂）_zhouzuoluo的博客-CSDN博客_slot
vue3作用域插槽 - 哔哩哔哩
‘v-slot’ directive must be owned by a custom element
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/174997.html