好资源导航 » 文章资讯 » Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

2023-07-17 05:28:03 55

1、slot作用/概念：预先将将来要使用的内容进行保留；

2、具名插槽：给slot起个名字

3、slot、slot-scope已经被废弃推荐使用vue2.6.0中的v-slot；但是这边还是对新旧方法对做一下使用说明。

slot插槽(不具名)




slot插槽占位内容

//定义插槽

这里是test组件

slot具名插槽使用

在组件中使用slot进行占位时，在slot标签内使用name属性给slot插槽定义一个名字，就是具名插槽。在html中使用具名插槽时，使用slot引入




这里是头部

//具名插槽使用这里是尾部

//具名插槽

这里是Test组件

v-slot使用

v-slot在组件中使用slot进行占位时，也是在slot标签内使用name属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容




//v-slot指令使用插槽
slot头部内容


直接插入组件的内容


slot尾部内容

//具名插槽

主体内容部分

作用域插槽：

slot-scope使用：

a、：在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。

b、：在组件使用时，通过slot-scope=“gain”,接收组件中slot标签上绑定的数据。

c、:通过gain.xxx就可以使用绑定数据了




//作用域插槽的用法（slot-scope）
{{gain.msg}}








这里是test组件

作用域插槽：v-slot的用法





//v-slot定义作用域插槽

slot
{{gain.msg}}









这里是test组件

Vue2.6.0中使用v-slot指令取代了特殊特性slot与slot-scope，但是从上述案例可以看出，v-slot在使用时，需要在template标签内，这点大家要注意。

补充知识：vue中v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别

不具名插槽

子组件：

在父组件中使用：





#inforCategory-warp{
}

作用域插槽：

slot-scope使用(slot-scope绑定的是子组件的数据)：

在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。

在组件使用时，通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。

通过scope.xxx就可以使用绑定数据了

具名插槽以及作用域插槽

子组件：

父组件：





#inforCategory-warp{
}

v-slot以及作用域插槽

子组件:

父组件：



直接插入组件的内容


slot尾部内容{{scope.msg}}








#inforCategory-warp{
}

以上这篇Vue插槽_特殊特性slot,slot-scope与指令v-slot说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

这里是test组件

这里是Test组件

slot头部内容

slot尾部内容

slot

这里是不具名插槽组件

这里是具名插槽组件

slot头部内容

slot尾部内容{{scope.msg}}

随机推荐

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

这里是test组件

这里是Test组件

slot头部内容

slot尾部内容

slot

这里是不具名插槽组件

这里是具名插槽组件

slot头部内容

slot尾部内容{{scope.msg}}

热门推荐

随机推荐