【愚公系列】《循序渐进Vue.js 3.x前端开发实践》023-自定义组件的插槽
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。博客内容.NET、...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在 Vue.js 中，组件是构建用户界面的基础，而插槽（Slots）则是实现高度灵活和可复用组件的重要工具。通过插槽，开发者可以在自定义组件中插入动态内容，从而使组件更加通用和适应多种场景。本篇文章将深入探讨 Vue 自定义组件中的插槽，帮助你掌握这一强大特性。
我们将首先介绍插槽的基本概念和使用方法，讲解如何在自定义组件中定义和使用插槽。接着，我们将探讨具名插槽和作用域插槽的高级用法，展示如何通过这些技术实现复杂的内容组合。同时，我们还会分享一些实际案例，帮助你理解插槽在项目中的实际应用场景。
🚀一、自定义组件的插槽
🔎1.HTML 结构部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue组件插槽</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<my-container>
<button>自定义按钮</button>
</my-container>
<my-container2>
<template #header>
<h1>这里是头部元素</h1>
</template>
<template #main>
<p>内容部分</p>
<p>内容部分</p>
</template>
<template #footer>
<p>这里是尾部元素</p>
</template>
</my-container2>
</div>
<script>
...
</script>
</body>
</html>
🦋1.1 功能说明
<my-container>组件：一个带有默认插槽内容的容器组件，父组件可以覆盖其默认内容。<my-container2>组件：一个带有命名插槽的容器组件，父组件可以为不同命名插槽传递不同内容。
🔎2.JavaScript 部分解析
const { createApp } = Vue;
const App = createApp({});
🦋2.1 说明
createApp用于创建 Vue 应用实例。这里我们创建了一个空的 Vue 应用实例，因为主要逻辑都在子组件中。
🔎3.定义 my-container2 组件
const container2Component = {
template: `<div>
<slot name="header"></slot>
<hr/>
<slot name="main"></slot>
<hr/>
<slot name="footer"></slot>
</div>`
};
App.component("my-container2", container2Component);
🦋3.1 说明
- 模板：
<slot name="header"></slot>：定义一个名字为header的插槽，父组件可以通过<template #header>来传递内容。<slot name="main"></slot>：定义一个名字为main的插槽，父组件可以通过<template #main>来传递内容。<slot name="footer"></slot>：定义一个名字为footer的插槽，父组件可以通过<template #footer>来传递内容。- 这些插槽之间使用
<hr/>分隔，以便在渲染时更容易区分不同部分。
🔎4.定义 my-container 组件
const containerComponent = {
template: `<div style="border-style:solid;border-color:red; border-width:10px">
<slot>插槽的默认内容</slot>
</div>`
};
App.component("my-container", containerComponent);
🦋4.1 说明
- 模板：
<slot>插槽的默认内容</slot>：定义一个默认插槽，父组件可以为这个插槽传递内容。如果父组件没有传递内容，插槽会显示默认的文本 “插槽的默认内容”。- 外层
<div>使用红色实线边框包裹，边框宽度为 10 像素，以便更容易看到组件的边界。
🔎5.Vue 应用挂载
App.mount("#Application");
- 将 Vue 应用挂载到
id="Application"的 DOM 元素上，启动 Vue 实例。
🔎6.逻辑总结
-
默认插槽：
my-container组件定义了一个默认插槽，父组件可以通过插槽传递按钮<button>自定义按钮</button>的内容。- 如果父组件没有传递内容，插槽将显示默认内容 “插槽的默认内容”。
-
命名插槽：
my-container2组件定义了三个命名插槽header、main和footer。- 父组件通过
<template #header>、<template #main>和<template #footer>为这些插槽传递内容。 - 内容会按顺序插入到
my-container2组件的对应插槽位置。
-
插槽的灵活性：
- 插槽使得组件的内容可以由父组件动态决定，从而使组件更具复用性和灵活性。
- 默认插槽和命名插槽的组合，可以满足不同复杂度的组件内容需求。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）