vue slot插槽使用场景,
本文主要介绍Vue.js槽的作用域槽用法的详细说明。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。
目录
无插槽，Vue2.x插槽有插槽，命名插槽无插槽属性，简单示例应用范围插槽(2.1.0中新增)，Vue3.x插槽，插槽范围插槽
没有插槽的情况
div id=应用程序
儿童
span1111/span
/孩子
/div
脚本
//注册子组件
Vue.component(child ，{
模板：“div这是一个div标记/div”
});
//初始化父组件
新Vue({
埃尔： #app
});
/脚本
模板中的span标记将被替换为“div，这是一个div标记/div ”,如下所示：
Vue2.x 插槽
有插槽的情况
简单地说，通过使用slot标签，您可以将span1111/span放置在您希望它显示的子组件中。如下图：
div id=应用程序
儿童
span1111/span
/孩子
/div
脚本
//注册子组件
Vue.component(child ，{
模板：“div这是slot/slot，一个div标记/div”
});
//初始化父组件
新Vue({
埃尔： #app
});
/脚本
即使有多个标签，也会一起插入，相当于用父组件放置在子组件中的标签替换slot/slot标签。如下图：
div id=应用程序
儿童
span1111/span
i2222/i
b3333/b
/孩子
/div
脚本
//注册子组件
Vue.component(child ，{
模板：“div这是slot/slot，一个div标记/div”
});
//初始化父组件
新Vue({
埃尔： #app
});
/脚本
具名插槽
父组件将slot=xxx 属性添加到要分发的标签中。
将name=xxx 属性添加到相应分发位置的子组件的插槽标签中。
那么相应的标签将被放置在相应的位置。如下图：
div id=应用程序
儿童
span slot=one1111/span
i slot=two2222/i
b插槽=三个 3333/b
/孩子
/div
脚本
//注册子组件
Vue.component(child ，{
模板：` div
这是
slot name=one/slot
一个
插槽名称=two/slot
差异
插槽名称=三/插槽
标签
/div ` 1
});
//初始化父组件
新Vue({
埃尔： #app
});
/脚本
没有slot属性
如果子组件标签中没有插槽属性，则为显示默认的值
div id=应用程序
儿童
！- span slot=one1111/span -
i slot=two2222/i
！- b slot=三 3333/b -
/孩子
/div
脚本
//注册子组件
Vue.component(child ，{
模板：` div
插槽名称=one 无人/插槽
slot name=twono two/slot
插槽名称=三不三/插槽
/div ` 1
});
//初始化父组件
新Vue({
埃尔： #app
});
/脚本
Slot=two 被插入固定位置，如下所示：
插槽简单实例应用
想想你电脑主板上的各种插槽，包括有CPU，显卡，内存，硬盘的，那么假设一个组件是电脑，它的模板是模板，如下：
身体
div id=应用程序
计算机
分区插槽=CPU 英特尔酷睿i7/分区
div slot=GPUGTX980Ti/div
div slot= Memory Kingston 32G/div
div slot=硬盘三星固态硬盘1T/div
/计算机
/div
脚本
//注册子组件
Vue.component(计算机，{
模板：` div
插槽名称=CPU 在此处插入您的CPU/插槽
Slot name=GPU 在此插入您的图形卡/插槽。
Slot name=Memory 在此插入您的内存/插槽。
Slot name=Hard-drive 在此插入您的硬盘/插槽。
/div ` 1
});
//初始化父组件
新Vue({
埃尔： #app
});
/脚本
/body
作用域插槽 ( 2.1.0 新增 )
Scope slot是一种特殊类型的slot，它被用作可重用的模板(可用于传输数据)来替换渲染元素。
在子组件中，只需将数据传递给插槽，就像将prop传递给组件一样。
在父组件中，以slot-scope=scoped 的形式获取子组件传递的数据。此数据对象的别名有作用域。这是作用域插槽的模板。
div id=应用程序
儿童
！-2.接收myName数据，作用域为{myName: cat boss的bean}-
模板slot=“内容”slot-scope=“范围”
div{{ scoped.myName }}/div
/模板
/孩子
/div
脚本
Vue.component(child ，{
data () {
返回{
我的名字：“猫老板的豆子”
}
},
模板：` slot name= content :my name= my name /slot `/1。向外抛出myname数据。
})
新Vue({
埃尔： #app
});
/脚本
Vue3.x 插槽
插槽
！-父组件-
模板
儿童
！- Vue2.x写作
div slot=parent
父分区组件/分区
/div
-
模板v形槽：父
父分区组件/分区
/模板
/孩子
/模板
！-子组件-
模板
插槽名称=父子组件/插槽
/模板
作用域插槽
在Vue2.x中，命名slot和作用域slot分别由slot和slot-scope实现，在vue3.x中slot和slot-scope合并使用。
父组件：
模板
儿童
！-template slot= content slot-scope= scoped -
模板v-slot:content=“scoped”
div{{scoped.myName}}/div
/模板
/孩子
/模板
子组件：
模板
slot name= content :my name= my name /slot
/模板
脚本
从“vue”导入{ ref }
导出默认值{
setup () {
Let myName=ref(猫老板的豆子)
返回{我的名字}
},
}
/脚本
关于Vue.js slot的作用域slot用法的详细说明本文到此为止。关于Vue.js槽的scope槽的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。