<vue 组件 4、插槽的使用>
代码结构
一、 01-slot-插槽的基本使用
1、 效果
同样的一个插槽,父组件调用的时候不同展现的内容就不同
2、代码
01-slot-插槽的基本使用.html
Title 哈哈哈 呵呵呵 我是div元素我是p元素
我是组件
二、 02-slot-具名插槽的使用
1、 效果
给插槽起名字,父组件调用的时候指定替换哪个插槽的内容
2、代码
02-slot-具名插槽的使用.html
Title ------------------------ 标题 ----------------------------左边 中间 右边
三、 03-slot-绑定数据及展现方式
1、效果
给插槽绑定数据,调用的时候还可以指定数据的不同展现形式
2、代码
03-slot-绑定数据及展现方式.html
Title ------------------------------------- {{slot.data.join(' - ')}} -------------------------------------{{slot.data.join(' * ')}}
- {{item}}