本文主要介绍了关于vue中slot的相关信息，通过示例代码进行了非常详细的介绍，对大家学习或使用vue有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
什么是插槽？
Slot是Vue提出的一个概念。就像它的名字一样，slot是用来决定将承载的内容插入到指定的位置，这样模板就可以分块，具有模块化的特点，可重用性更强。插槽是否显示由父组件控制，插槽显示在哪里由子组件控制。
Vue slot 原理
web-components中有槽的概念，https://developers . Google . com/web/foundations/we B- components/shadow DOM。
槽元件
Shadow DOM使用slot元素来组合不同的DOM树。Slot是组件内部的占位符，用户可以用自己的标记填充它。
通过定义一个或多个slot，您可以将外部标记引入到组件的阴影DOM中进行呈现。这相当于说“在这里渲染用户的标记”。
注：Slot是一种为网络组件创建“声明性API”的方法。它们被混合到用户的DOM中，以帮助呈现整个组件，从而组合不同的DOM树。
怎么用插槽？
默认插槽
父组件
模板
差异
是我的父组件。
插槽1
P=' color: red '我是父组件插槽内容/p
/slotOne1
/div
/模板
编写希望在父组件引用的子组件中显示的内容(可以使用标签，也可以不使用)。
子组件(插槽1)
模板
div class='slotOne1 '
我是slotOne1组件/div。
插槽/插槽
/div
/模板
在子组件中写槽，槽所在的位置就是父组件要显示的内容。
当然，父组件引用的子组件中也可以写入其他组件。
父组件
模板
差异
是我的父组件。
插槽1
P=' color: red '我是父组件插槽内容/p
插槽一2/插槽一2
/slotOne1
/div
/模板
子组件(插槽2)
模板
div class='slotOne2 '
我是slotOne2组件。
/div
/模板
具名插槽
组件
模板
div class='slottwo '
divslotwo/div
插槽名称='header'/slot
插槽/插槽
插槽名称='页脚'/插槽
/div
/模板
在子组件中定义了三个slot标记，其中两个分别添加了名称属性header和footer。
父组件
模板
差异
是我的父组件。
第二个
p啦啦啦啦啦，我是卖报的小能手/p
模板slot='header '
我是slot/p，名字是header。
/模板
我是一个名为footer/p的插槽。
/slot-2
/div
/模板
使用父组件中的模板并写入相应的slot值来指定内容在子组件中的实际位置(当然不一定要写入模板)。没有相应值的其他内容将被放入槽中，而不会在子组件中添加name属性。
插槽的默认内容
父组件
模板
差异
是我的父组件。
插槽二/插槽二
/div
/模板
组件
模板
div class='slottwo '
Slot我不是卖报纸的小能手/slot
/div
/模板
您可以在子组件的slot标签中写入内容。当父组件不写内容时，将显示子组件的默认内容，当父组件写内容时，将替换子组件的默认内容。
编译作用域
父组件
模板
差异
是我的父组件。
第二个
p{{name}}/p
/slot-2
/div
/模板
脚本
导出默认值{
data () {
返回{
姓名：“杰克”
}
}
}
/脚本
组件
模板
div class='slottwo '
插槽/插槽
/div
/模板
作用域插槽
组件
模板
差异
是我的作用域槽的子组件。
slot :data='user'/slot
/div
/模板
脚本
导出默认值{
名称：“三号槽”，
data () {
返回{
用户：[
{姓名：'杰克'，性别：'男孩' }，
{姓名：'琼斯'，性别：'女孩' }，
{姓名：'汤姆'，性别：'男孩' }
]
}
}
}
/脚本
在子组件的插槽标签上绑定所需的值。
父组件
模板
差异
我是瞄准镜插槽。
三号位
模板插槽-作用域=“用户”
' div v-for=' item in user . data ':key=' item . id '
{{item}}
/div
/模板
/slot-三
/div
/模板
在父组件上使用slot-scope属性，user.data是子组件传递的值。
总结
这就是本文的全部内容。希望这篇文章的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。