vue 具名插槽与作用域插槽同时使用,vue3具名插槽
本文主要介绍了Vue中的匿名槽和命名槽，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.匿名槽2。命名插槽摘要
Slot也叫槽位，是Vue的内容分发机制。组件内部的模板引擎使用slot元素作为出口来传送分发的内容。
Slot是子组件的模板标签元素，这个标签元素是否显示以及如何显示是由父组件决定的。
槽分为三类：默认槽、命名槽和作用域槽。(这里提到前两个)
slot的本质是：slot是子组件的扩展，内容通过slot slot传递到组件内部的“指定位置”。
1.匿名插槽
默认插槽:也称为匿名槽，当槽没有指定name属性的值时，是默认显示槽。一个组件中只有一个匿名槽。
举例：
首先，创建一个Vue实例，并将其挂载到id为app的div上。
div id=应用程序
/div
脚本src=。/js/vue.js/script
脚本
//根组件(父组件，也称为基组件)
让vm=new Vue({
埃尔： #app ，
})
/脚本
创建一个本地组件，在组件中定义插槽，并确保插槽放置在子组件中。
//声明本地组件
let child={
模板：` 1
差异
p我是子组件/p
p我是一行字/p
位置这是占位符内容/位置
/div
`
}
本地组件定义在vm实例的子组件的中心，并呈现在视图层。
//根组件(父组件，也称为基组件)
让vm=new Vue({
埃尔： #app ，
//子组件(注册表)
组件：{
//键-值对，当键和值相同时可以省略
儿童
}
})
div id=应用程序
！-使用组件-
孩子/孩子
/div
当没有传递任何内容时，将显示插槽的(默认)内容。
我们将内容传递给视图层中的插槽：
！-使用组件-
儿童
h1 style= color:aqua；这是一个内容/h1
/孩子
当有东西被传递时，槽的(默认)内容不会被显示。
注意：当你想把内容传入视图层的槽中时，子组件中必须有槽，否则不会显示！
当一个子组件中有多个匿名槽时，交付的内容将被放入每个槽中：
模板：` 1
差异
p我是子组件/p
p我是一行字/p
位置这是占位符内容/位置
插槽/插槽
插槽/插槽
/div
`
儿童
h1 style= color:aqua；这是第一个内容/h1
h1 style= color:red；这个第二内容/h1
/孩子
2.具名插槽
在子组件中定义槽时，命名相应的槽，以便以后可以插入父组件，根据名称填充相应的内容。
首先在子组件中给插槽起一个好名字(匿名插槽实际上有一个默认的名字，default，可以省略):
模板：` 1
差异
p我是子组件/p
p我是一行字/p
Slot name=default 这是占位符内容/slot
槽名=t1 这是t1占位符/槽的内容
槽名=t2 这是t2占位符/槽的内容
槽名=t3 这是t3占位符/槽的内容
槽名=t5 这是t4占位符/槽的内容
/div
`,
使用命名槽的方法
1.在子组件中，应该首先定义和命名插槽。
2.在父组件的视图图层中的标签上，将“槽”属性添加到该标签中。
可以为该属性指定特定插槽的名称。
儿童
！——此时这两句话还在匿名槽里——
h1 style= color:aqua；这是第一个内容/h1
h1 style= color:red；这个第二内容/h1
！-slot= t1 指定将内容放在哪个槽中-
H2 style= color:blue；Slot=t1 我想在指定的插槽t1中使用/h2
H3 style= color:green；Slot=t2 我想在指定的插槽T2 /h3中使用它
H4 style= color:orange；Slot=t3 我想把它放在指定的插槽t3中使用/h4
H5 style= color:pink；Slot=t4 我想在命名的slot t4中使用/h5。
/孩子
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。