1、具名插槽
具名插槽通常用作在指定的位置输出我们的子元素
//组件调用时
//这里v-slot:后边的值与组件内的slot的name属性对应,也就是插槽的名称。
子组件测试文字
//书写组件时
测试文字//这里name的值就是这个插槽的名称。
最后可以将元素放在任意位置
2、作用域插槽
作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。
//组件调用
{{item.msg}
//书写组件时
注意事项:
这里需要注意的是item是所有你绑定属性的集合,也就是你写的:msg=“title”会当做item的属性来实现。
item可以改为其它的名称,自定义就好。
3、默认插槽
【vue|vue中v-slot详解,具名插槽和作用域插槽】4、总结
v-slot的出现是为了代替原有的slot和slot-scope
简化了一些复杂的语法。
一句话概括就是v-slot :后边是插槽名称,=后边是组件内部绑定作用域值的映射。
推荐阅读
- vue|Element-UI默认样式改不了(怎么办)
- vue.js|vue基础入门之侦听器、计算属性、vue-cli、vue组件
- springboot|Springboot+Vue+Element实现的CRM管理系统
- java进阶-框架篇|springboot + VUE实现后台管理系统(集成JWT接口权限验证)
- SpringBoot教学|如何快速使用SpringBoot+Vue前后端分离实现echarts图形可视化(入门详细教程)
- VUE|Flask+VUE 实现页面增删改查显示开发+测试(图文教程附源码)
- vue|vue组件传值方式
- Vue|[Vue】Vue项目的创建以及饿了么UI的使用