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>

渲染结果：