【vue】插槽(slot)
插槽
- 默认插槽
- 具名插槽
- 作用域插槽
- 数据与结构在父组件
- 插槽在子组件
...无插入时默认结构...父组件
![]()
复用组件2具名插槽
每个被复用的组件有一部分结构或数据不同
从父组件中将不同的数据与结构填充到子组件的插槽中
- 数据与结构在父组件中
- 插槽在子组件中
- 复用的组件有多个地方不同
...默认值1...默认值2父组件
![]()
![]()
给每个插槽添加3 作用域插槽name属性
父组件插入的模板添加v-slot属性
无指定的模板 默认插入无name属性的插槽
- 结构在父组件
- 数据与插槽在子组件
- 【【vue】插槽(slot)】默认
子组件
...无插入时默认结构...
父组件
{{data.data1}} {{data2}}
- 具名
子组件
...无插入时默认结构...无插入时默认结构
父组件
... ... ...
v-slot:name是对具名插槽的选择
v-slot="obj"是对默认插槽的选择 简写形式
上面两种方法尽量不要同时用，可能会出现选择不明确的错误
v-slot:name="obj"从具名插槽中接收值，在父组件中接收并编译完成再插入子组件
只要出现多个插槽，尽量使用template中的v-slot
推荐使用template的v-slot 完整的写法
v-slot:default="obj"与 v-slot:other="obj"
不推荐使用slot="name"与slot-scope="obj"
推荐阅读
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗（）
- 2019-02-13——今天谈梦想（）
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘
- 学无止境，人生还很长