插槽
- 默认插槽
- 具名插槽
- 作用域插槽
1默认插槽
- 数据与结构在父组件
- 插槽在子组件
子组件
<!-- 复用的结构-->
...
<!-- 不复用的位置 -->
<slot>无插入时默认结构</slot>
<!-- 复用的结构-->
...
父组件
<Component >
<img/>
</Component>
<video/>
<Component >
<h3/>
<Component >
复用组件
每个被复用的组件有一部分结构或数据不同
从父组件中将不同的数据与结构填充到子组件的插槽中
2具名插槽
- 数据与结构在父组件中
- 插槽在子组件中
- 复用的组件有多个地方不同
子组件
<!-- 复用的结构 -->
...
<!-- 不复用的位置1 -->
<slot name="slot1">默认值1<slot>
<!-- 复用的结构 -->
...
<!-- 不复用的位置2 -->
<slot name="slot2">默认值2<slot>
父组件
<Component >
<template v-slot:slot1>
<img/>
</template>
<template v-slot:slot2>
<video/>
</template>
</Component>
<Component >
<template v-slot:slot1>
<h3></h3>
</template>
<template v-slot:slot2>
<img/>
</template>
</Component >
给每个插槽添加name
属性
父组件插入的模板添加v-slot
属性
无指定的模板 默认插入无name属性的插槽
3 作用域插槽
- 结构在父组件
- 数据与插槽在子组件
默认
子组件<!-- 复用的结构--> ... <!-- 不复用的位置 --> <slot :data1="food" :data2="drink">无插入时默认结构</slot> <!-- 复用的结构--> ...
父组件
<Component > <!-- 对象取值 --> <template v-slot="data"> <h2>{{data.data1}}</h2> </template> </Component> <Component > <!-- 解构取值 --> <template v-slot="{ data2 }"> <h3>{{data2}}</h3> </template> </Component >
具名
子组件<!-- 复用的结构--> ... <!-- 不复用的位置 --> <slot :data1="food" :data2="drink" name="slot1">无插入时默认结构</slot> <!-- 复用的结构--> ... <!-- 不复用的位置 --> <slot :data1="live" :data2="transport" name="slot2">无插入时默认结构</slot>
父组件
<Component > <template v-slot:slot1="{{ food }}"> ... </template> <template v-slot:slot2="{{live}}"> ... </template> </Component> <Component > <template v-slot:slot1="{{drink}}"> ... </template> </Component >
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"
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。