Vue 3 具名插槽传值详解

news2024/12/28 8:56:04

Vue 3 具名插槽传值详解

Vue 3 的具名插槽不仅支持内容插入，还支持通过作用域插槽传递值（又称插槽作用域）。这使得父组件能够动态接收来自子组件的数据，从而实现更加灵活的组件开发。

在本文中，我们将深入讲解 Vue 3 中具名插槽传值的概念、使用方法，以及其在实际场景中的应用。

1. 什么是插槽作用域？

插槽作用域是 Vue 的一种特性，它允许子组件通过插槽向父组件传递数据。父组件可以动态使用这些数据自定义插槽内容。

作用域插槽的基本使用形式如下：

<template>
  <child-component>
    <template v-slot:name="slotProps">
      <!-- 使用 slotProps 提供的值 -->
    </template>
  </child-component>
</template>

2. 插槽传值的基本使用

2.1 子组件定义传递数据的插槽

在子组件中，通过 <slot> 标签的 v-bind 传递数据。例如：

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello from Child Component"
    };
  }
};
</script>

这里，子组件通过 v-bind 向插槽传递了 message 数据。

2.2 父组件接收数据并使用

父组件通过 v-slot 指令接收子组件传递的值：

<template>
  <child-component>
    <template v-slot:default="{ message }">
      <p>{{ message }}</p>
    </template>
  </child-component>
</template>

输出结果为：

Hello from Child Component

3. 多插槽传值

具名插槽支持传递独立的数据，为每个插槽提供灵活的内容自定义能力。

3.1 子组件定义多个插槽

<template>
  <div>
    <slot name="header" :title="title"></slot>
    <slot name="content" :body="body"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "标题",
      body: "这是内容部分"
    };
  }
};
</script>

3.2 父组件分别接收数据

父组件可以通过不同的插槽接收和使用子组件传递的数据：

<template>
  <child-component>
    <template v-slot:header="{ title }">
      <h1>{{ title }}</h1>
    </template>
    <template v-slot:content="{ body }">
      <p>{{ body }}</p>
    </template>
  </child-component>
</template>

结果：

标题部分将渲染为 <h1>标题</h1>。
内容部分将渲染为 <p>这是内容部分</p>。

4. 动态列表和插槽传值结合

插槽传值在动态列表中非常实用。以下是一个动态渲染列表项的示例：

4.1 子组件定义带数据的插槽

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <slot name="item" :item="item"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
};
</script>

4.2 父组件自定义列表渲染

父组件通过插槽自定义每个列表项的渲染内容：

<template>
  <list-component :items="['苹果', '香蕉', '橙子']">
    <template v-slot:item="{ item }">
      <li>{{ item }} - 自定义内容</li>
    </template>
  </list-component>
</template>

渲染结果为：

苹果 - 自定义内容
香蕉 - 自定义内容
橙子 - 自定义内容

5. 实际应用场景

5.1 表格组件

具名插槽传值可用于创建灵活的表格组件：

<template>
  <table>
    <thead>
      <tr>
        <slot name="header" />
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <slot name="row" :row="row" />
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    rows: {
      type: Array,
      required: true
    }
  }
};
</script>

父组件自定义表格内容：

<template>
  <table-component :rows="data">
    <template v-slot:header>
      <th>名称</th>
      <th>年龄</th>
    </template>
    <template v-slot:row="{ row }">
      <td>{{ row.name }}</td>
      <td>{{ row.age }}</td>
    </template>
  </table-component>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: "张三", age: 25 },
        { id: 2, name: "李四", age: 30 }
      ]
    };
  }
};
</script>

渲染结果：