具名/匿名/作用域插槽区分

发布于:2024-07-11 ⋅ 阅读:(19) ⋅ 点赞:(0)

总是忘记具名/匿名/作用域插槽区别,特此记录

区分方法

  • 看名称:具名插槽有名称,匿名插槽没有。
  • 看内容:作用域插槽允许父组件访问子组件的数据,并通过插槽模板来展示这些数据。
  • 看用法:匿名插槽和具名插槽都是通过 <slot> 标签在子组件中定义的,而作用域插槽则是通过 v-bind 或 : 在 <slot> 标签上绑定数据,并在父组件中通过 slot-scope 或 v-slot 来接收这些数据。
  • 看传向:具名/匿名插槽 -- 父传子 ;作用域插槽 -- 子传父

匿名插槽(Default Slots)

  • 特点:没有指定名称的插槽。
  • 用法:在子组件中使用一个单独的 <slot> 标签作为内容插入点。在父组件中,任何没有被包裹在具名 <template> 标签中的内容都会被插入到这个匿名插槽中。
  • 示例
    vue<!-- 子组件 -->
    <template>
    <div>
    <slot></slot> <!-- 匿名插槽 -->
    </div>
    </template>
    
    <!-- 父组件 -->
    <ChildComponent>
    <p>这是默认内容,会插入到匿名插槽中</p>
    </ChildComponent>

具名插槽(Named Slots)

  • 特点:具有指定名称的插槽。
  • 用法:在子组件中使用多个 <slot> 标签,并通过 name 属性给它们命名。在父组件中,使用 <template> 标签包裹要插入的内容,并通过 slot 或 v-slot:name 属性来指定插槽的名称。
  • 示例
    vue<!-- 子组件 -->
    <template>
    <div>
    <slot name="header"></slot>
    <slot name="footer"></slot>
    </div>
    </template>
    
    <!-- 父组件 -->
    <ChildComponent>
    <template v-slot:header>
    <p>这是头部内容</p>
    </template>
    <template v-slot:footer>
    <p>这是底部内容</p>
    </template>
    </ChildComponent>

作用域插槽(Scoped Slots)

  • 特点:允许父组件访问子组件的数据。
  • 用法:在子组件的 <slot> 标签上使用 v-bind 或简写 : 来绑定要传递给父组件的数据。在父组件中,通过 slot-scope(Vue 2.x)或 v-slot(Vue 3.x)属性来接收这些数据,并在插槽的模板中使用它们。
  • Vue 2.x 示例
    vue<!-- 子组件 -->
    <template>
    <div>
    <slot :items="myItems"></slot>
    </div>
    </template>
    
    <!-- 父组件 -->
    <ChildComponent>
    <template slot-scope="scope">
    <ul>
    <li v-for="item in scope.items" :key="item">{{ item }}</li>
    </ul>
    </template>
    </ChildComponent>
  • Vue 3.x 示例(使用 v-slot):
    vue<!-- 父组件 -->
    <ChildComponent>
    <template v-slot:default="{ items }">
    <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    </template>
    </ChildComponent