插槽

  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"

怼怼
73 声望6 粉丝