vue2.6 更新v-slot插槽

北寂.

已于 2022-05-25 16:47:23 修改

阅读量508

点赞数 1

文章标签： vue.js javascript

于 2022-05-25 16:46:59 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45059900/article/details/124969021

版权

本文介绍了Vue2.6中v-slot的三种类型：匿名插槽、具名插槽和作用域插槽。通过示例详细解析了如何在子组件和父组件中使用它们，强调了作用域插槽如何实现父组件接收并使用子组件传递的数据。总结了插槽带来的新父子组件通讯方式，增强了父组件构建模板的能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

slot种类：

　　匿名插槽、具名插槽、作用域插槽

子组件ChildrenHasSlot.vue:

<template>
  <div>
    我是子组件ChildrenHasSlot.vue
    <slot>我是默认值</slot>
    <slot name="chacaoB">我是chacaoB默认值</slot>
    <slot name="chacaoC" :data1="data1" :data2="data2">我是chacaoC默认值</slot>
    <slot name="chacaoD" :data1="data1" :data2="data2">我是chacaoD默认值</slot>
  </div>
</template>

<script>
export default {
  name: "ChildrenHasSlot",
  data() {
    return {
      data1: {
        a: 111,
        b: 222
      },
      data2: {
        c: 333,
        d: 444
      }
    }
  }
}
</script>

父组件ParentDemoSlot.vue

<template>
  <div>
    <ChildrenHasSlot>

      <!-- 匿名插槽 -->
      <template v-slot:default>
        <h4>这是插入'默认'插槽的内容</h4>
      </template>

      <!-- 具名插槽 -->
      <template v-slot:chacaoB>
        <h4>这是插入插槽B的内容</h4>
      </template>

      <!-- 作用域插槽 -->
      <template v-slot:chacaoC="slotProps">
        <h4>这是插入插槽C的内容</h4>
        <h4>{{slotProps}}</h4>
        <h4>data1数据：{{slotProps.data1}}</h4>
        <h4>data2数据：{{slotProps.data2}}</h4>
      </template>

      <!-- 作用域插槽 解构slot传值 -->
      <template v-slot:chacaoD="{data1,data2}">
        <h4>这是插入插槽D的内容</h4>
        <h4>data1数据：{{data1}}</h4>
        <h4>data2数据：{{data2}}</h4>
      </template>

    </ChildrenHasSlot>
  </div>
</template>

<script>
import ChildrenHasSlot from "@/components/ChildrenHasSlot";

export default {
  name: "ParentDemoSlot",
  components: {
    ChildrenHasSlot
  },
  data() {
    return {}
  }
}
</script>

1. 匿名插槽：

子组件定义占位：

<slot>我是默认值</slot>

父组件使用：

方式1：

<template v-slot:default>
 <h4>这是插入'默认'插槽的内容</h4>
</template>

等价于

方式2：defalut可以省略，加上只是为了更直观理解

<template v-slot>
 <h4>这是插入'默认'插槽的内容</h4>
</template>

2. 具名插槽（有具体名字的插槽）：

子组件定义占位：

<slot name="chacaoB">我是chacaoB默认值</slot>

父组件使用：

<template v-slot:chacaoB>
  <h4>这是插入插槽B的内容</h4>
</template>

3.作用域插槽（可从子组件插槽传值到父组件插槽使用处）：

子组件定义占位：

<slot name="chacaoC" :data1="data1" :data2="data2">我是chacaoC默认值</slot>

父组件使用：

<template v-slot:chacaoC="slotProps">
  <h4>这是插入插槽C的内容</h4>
  <h4>{{slotProps}}</h4>
  <h4>data1数据：{{slotProps.data1}}</h4>
  <h4>data2数据：{{slotProps.data2}}</h4>
</template>

TIPS: slotProps的名字不是必须的指定的名称，可以DIY

当然也可以用ES6的解构出这些数据这样：

<template v-slot:chacaoD="{data1,data2}">
  <h4>这是插入插槽D的内容</h4>
  <h4>data1数据：{{data1}}</h4>
  <h4>data2数据：{{data2}}</h4>
</template>

TIPS：slotProps代表子组件通过插槽传递的所有data数据，因为我们传递了2个分别是data1、data2，所以，slotProps是这样的:
{ "data1": { "a": 111, "b": 222 }, "data2": { "c": 333, "d": 444 } }

个人心得总结：

普通的父子组件关系是，子组件完成template内容的构成，通过v-bind和$emit完成父子数据通讯，并插入到父组件中显示

而插槽的作用是，赋予了父组件协助子组件完成template模块的功能，同时也出现了新的父子组件通讯方式