插槽

1. 默认插槽
2. 具名插槽
3. 作用域插槽

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 作用域插槽

• 构造在父组件
• 数据与插槽在子组件

1. 默认
   子组件

   <!-- 复用的构造-->...<!-- 不复用的地位 --><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 >

2. 具名
   子组件

   <!-- 复用的构造-->...<!-- 不复用的地位 --><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"