Vue 插槽：实现组件内容分发的强大工具

1. 什么是插槽

插槽是 Vue 组件中的一个概念，它允许我们向组件内部传递内容。这在使用组件时提供了极大的灵活性，因为我们可以根据需要自定义组件的内部结构，而不必改变组件本身。

2. 插槽的类型

2.1 默认插槽

默认插槽是 Vue 组件中最基础的插槽类型。它允许你在组件的标签内部添加任何内容，这些内容将在组件的 <slot> 标签位置被渲染。默认插槽不需要指定名称，因此每个组件只有一个默认插槽。

当组件被渲染时，默认插槽的内容会替换组件模板中的 <slot> 标签。如果组件模板中没有 <slot> 标签，则默认插槽的内容不会被渲染。

默认插槽的使用非常直观，它提供了一种简单的方式来向组件传递内容和标记，同时保持组件的封装和可复用性。

2.2 具名插槽

具名插槽是一种更高级的插槽类型，它允许你有选择地将内容分布到组件的不同位置。通过为插槽指定一个名字，你可以在父组件中决定哪些内容应该被放置在哪里。

在组件模板中，你可以通过添加 name 属性来为插槽命名。这样，你可以有多个具名插槽，每个插槽可以放置不同的内容。

在父组件中，你可以使用 v-slot 指令来指定内容应该插入哪个具名插槽。v-slot 指令的参数是插槽的名字，它告诉 Vue 应该将内容放置在对应的具名插槽中。

具名插槽的使用使得组件更加灵活和可定制，因为它允许你根据需要将内容分布到组件的不同部分。

2.3 作用域插槽

作用域插槽是一种特殊类型的插槽，它允许你访问子组件中的数据。这样，你可以在父组件中定义一个模板，该模板可以使用子组件提供的数据。

在子组件中，你可以通过将数据作为属性传递给 <slot> 标签，将这些数据暴露给父组件。这样，父组件可以使用这些数据来决定如何渲染内容。

在父组件中，你可以使用 v-slot 指令来定义一个作用域插槽，并通过解构赋值来获取子组件提供的数据。这样，你可以在父组件中访问子组件的数据，并根据这些数据来渲染内容。

作用域插槽的使用允许你创建更加动态和可配置的组件，因为它允许你根据子组件的数据来决定如何渲染内容。

3. 插槽的基本用法

3.1 渲染默认内容

在 Vue 中，默认插槽是一种非常直接的内容分发方式。下面是如何使用默认插槽来渲染组件的默认内容，以及如何在父组件中替换这些内容的步骤：

使用默认插槽渲染组件的默认内容

定义子组件：在子组件的模板中，你可以使用 <slot> 标签来指定默认内容的位置。任何没有指定插槽名称的内容都会被放置在这个位置。

<!-- 子组件模板 -->
<template><div><h1>这是一个卡片组件</h1><!-- 默认插槽 --><slot><!-- 这里是默认内容 --><p>这是卡片的默认内容。</p></slot></div>
</template>

在这个例子中，如果父组件没有提供任何内容，那么 <slot> 标签内的默认内容 <p>这是卡片的默认内容。</p> 将会被渲染。

在父组件中替换默认内容

使用子组件：在父组件中，你可以简单地将在子组件标签内部的内容作为默认插槽的内容。

<!-- 父组件模板 -->
<template><div><h2>这是父组件</h2><!-- 使用子组件并替换默认内容 --><Card><p>这是自定义的卡片内容。</p></Card></div>
</template>

在这个例子中，<Card> 组件的默认插槽内容会被父组件中提供的 <p>这是自定义的卡片内容。</p> 替换。

渲染结果：当父组件被渲染时，<Card> 组件的默认内容将被替换为我们自定义的内容。

<!-- 渲染结果 -->
<div><h2>这是父组件</h2><div><h1>这是一个卡片组件</h1><p>这是自定义的卡片内容。</p></div>
</div>

3.2 使用具名插槽组织内容

定义子组件

在子组件的模板中，你可以通过添加 name 属性来为插槽命名。这样，你可以有多个具名插槽，每个插槽可以放置不同的内容。

<!-- 子组件模板 -->
<template><div><header><!-- 头部插槽 --><slot name="header"></slot></header><main><!-- 默认插槽 --><slot></slot></main><footer><!-- 底部插槽 --><slot name="footer"></slot></footer></div>
</template>

在这个例子中，子组件有三个插槽：一个默认插槽和两个具名插槽（header 和 footer）。

在父组件中分配内容到不同的插槽

<!-- 父组件模板 -->
<template><div><h2>这是父组件</h2><!-- 使用子组件并分配内容到不同的插槽 --><NamedComponent><!-- 默认插槽的内容 --><p>这是默认插槽的内容。</p><!-- 头部插槽的内容 --><template v-slot:header><h1>这是头部插槽的内容</h1></template><!-- 底部插槽的内容 --><template v-slot:footer><p>这是底部插槽的内容。</p></template></NamedComponent></div>
</template>

在这个例子中，父组件提供了三个不同的内容块，分别分配给子组件的默认插槽、header 插槽和 footer 插槽。

渲染结果

当父组件被渲染时，子组件的插槽会被父组件中提供的内容替换。

<!-- 渲染结果 -->
<div><h2>这是父组件</h2><div><header><h1>这是头部插槽的内容</h1></header><main><p>这是默认插槽的内容。</p></main><footer><p>这是底部插槽的内容。</p></footer></div>
</div>

3.3 作用域插槽的解构赋值

定义子组件

在子组件中，你可以通过将数据作为属性传递给 <slot> 标签，将这些数据暴露给父组件。这样，父组件可以使用这些数据来决定如何渲染内容。

<!-- 子组件模板 -->
<template><div><slot :user="user"></slot></div>
</template><script>
export default {data() {return {user: {name: 'Alice',age: 25}}}
}
</script>

在这个例子中，子组件通过 :user="user" 将用户数据传递给插槽。

在父组件中使用作用域插槽

<!-- 父组件模板 -->
<template><div><h2>这是父组件</h2><!-- 使用子组件并定义作用域插槽 --><ScopedComponent><!-- 使用解构赋值来获取子组件提供的数据 --><template v-slot="{ user }"><h1>{{ user.name }} - {{ user.age }}</h1></template></ScopedComponent></div>
</template>

在这个例子中，父组件使用了解构赋值 { user } 来获取子组件提供的用户数据，并在模板中使用了这些数据。

渲染结果

当父组件被渲染时，作用域插槽的内容会被渲染，并使用子组件提供的数据。

<!-- 渲染结果 -->
<div><h2>这是父组件</h2><div><h1>Alice - 25</h1></div>
</div>

3.4 作用域插槽这么麻烦，存在意义是什么？

通过这种方式，父子组件各司其职，共同构建出一个动态且可配置的 UI。子组件专注于定义组件的结构和逻辑，而父组件则专注于定义组件的具体内容和展示方式。这种分工使得组件更加灵活和可复用。

父子组件的分工

子组件 <DynamicList> 负责：
- 定义列表的布局和结构。
- 提供作用域插槽，允许父组件插入自定义的模板。
- 传递列表项的数据给父组件。
父组件 负责：
- 定义每个列表项的具体内容。
- 使用 v-slot 指令定义一个模板，这个模板将插入到子组件的作用域插槽中。
- 使用子组件传递的数据来渲染列表项。

4. 插槽的实际应用案例

4.1 创建一个可复用的列表组件

我们创建一个名为 <ReusableList> 的组件，它接受一个数组作为 props，并使用插槽来决定如何渲染每个列表项。

子组件 `<ReusableList>`

定义插槽：在子组件的模板中，我们定义一个默认插槽，用于渲染每个列表项。
数据传递：通过 props，子组件接收一个数组，其中包含每个列表项的详细信息。

<!-- 子组件模板 -->
<template><ul><li v-for="item in items" :key="item.id"><!-- 默认插槽，用于渲染每个列表项 --><slot :item="item"></slot></li></ul>
</template><script>
export default {props: {items: {type: Array,required: true}}
}
</script>

在这个例子中，子组件 <ReusableList> 接受一个名为 items 的数组作为 props。它使用 v-for 指令来遍历这个数组，并为每个列表项渲染一个 <li> 标签。通过 <slot> 标签和 :item="item"，子组件将每个列表项的数据传递给父组件。

父组件

使用插槽：在父组件的模板中，我们使用 <ReusableList> 组件，并定义一个自定义的模板来渲染每个列表项。

<!-- 父组件模板 -->
<template><div><h2>这是父组件</h2><!-- 使用子组件并定义自定义模板 --><ReusableList :items="todos"><!-- 自定义模板，用于渲染每个列表项 --><template v-slot:default="{ item }"><span :class="{ completed: item.completed }">{{ item.text }}</span><button @click="toggleCompleted(item.id)">完成</button></template></ReusableList></div>
</template><script>
export default {data() {return {todos: [{ id: 1, text: '学习 Vue', completed: false },{ id: 2, text: '编写博客', completed: true },{ id: 3, text: '阅读书籍', completed: false }]}},methods: {toggleCompleted(id) {// 切换待办事项的完成状态}}
}
</script>

在这个例子中，父组件 <ReusableList> 接收了一个名为 todos 的数组作为 props。它使用 v-slot 指令来定义一个自定义模板，这个模板将插入到子组件的默认插槽中。通过解构赋值 { item }，父组件可以访问子组件传递的每个列表项的数据。

渲染结果

当父组件被渲染时，子组件的插槽内容会被父组件中提供的自定义模板替换。

<!-- 渲染结果 -->
<div><h2>这是父组件</h2><ul><li><span>学习 Vue</span><button>完成</button></li><li><span class="completed">编写博客</span><button>完成</button></li><li><span>阅读书籍</span><button>完成</button></li></ul>
</div>