【愚公系列】《循序渐进Vue.js 3.x前端开发实践》024-动态组件
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在现代前端开发中，组件化设计已经成为构建复杂用户界面的核心理念。而在 Vue.js 框架中，动态组件的概念为我们提供了更高的灵活性和可重用性，使得应用的开发和维护变得更加高效。动态组件允许开发者根据应用状态或用户交互，实时切换不同的组件，从而提升用户体验和应用性能。
本篇文章将深入探讨 Vue 中的动态组件，帮助你理解如何在实际项目中灵活运用这一特性。我们将从动态组件的基本概念入手，详细介绍如何使用 <component> 标签和 v-bind:is 指令来实现组件的动态切换。此外，我们还将讨论动态组件的生命周期以及过渡效果，展示如何为用户提供流畅的视觉体验。
🚀一、动态组件
🔎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">
<input type="radio" value="page1" v-model="page"/>页面1
<input type="radio" value="page2" v-model="page"/>页面2
<component :is="page"></component>
</div>
<script>
...
</script>
</body>
</html>
🦋1.1 功能说明
<input type="radio" v-model="page"/>：定义了两个单选按钮，v-model="page"用来绑定page变量，用户选择不同的单选按钮时，page的值会改变。page的值可以是"page1"或"page2"，对应着页面组件1和页面组件2。<component :is="page"></component>：Vue 的动态组件语法。通过:is指令，component标签将根据page的值动态切换成page1或page2组件。也就是说，当page的值为"page1"时，<component>会渲染page1组件；当page的值为"page2"时，渲染page2组件。
🔎2.JavaScript 部分解析
const { createApp, ref } = Vue;
const App = createApp({
setup() {
const page = ref("page1"); // 默认展示 page1
return { page };
}
});
🦋2.1 说明
createApp：用于创建 Vue 应用实例。这个实例的根组件使用了setup函数来进行逻辑处理。ref("page1")：在 Vue 3 中，ref用于定义响应式数据。这里page是一个响应式变量，初始值为"page1"，表示默认显示page1组件。setup：Vue 3 中 Composition API 的一部分，setup函数在组件创建时调用，返回的对象会成为模板中可用的数据。这里返回了page变量，使其可以在模板中绑定。
🔎3.定义 page1 和 page2 组件
const page1 = {
template: `<div style="color:red">页面组件1</div>`
};
const page2 = {
template: `<div style="color:blue">页面组件2</div>`
};
🦋3.1 说明
page1和page2是两个简单的 Vue 组件，它们分别展示不同的内容和样式。page1组件的模板包含一个红色的文本，内容是 “页面组件1”。page2组件的模板包含一个蓝色的文本，内容是 “页面组件2”。
- 这些组件是通过
App.component注册的，确保它们在 Vue 应用中可用。
🔎4.组件注册和挂载
App.component("page1", page1);
App.component("page2", page2);
App.mount("#Application");
🦋4.1 说明
App.component("page1", page1)和App.component("page2", page2)：将page1和page2组件注册为全局组件，这样在模板中可以通过<page1>和<page2>来使用它们。App.mount("#Application")：将 Vue 应用挂载到id="Application"的 DOM 元素上，启动 Vue 实例。
🔎5.逻辑总结
-
动态组件：
- 通过
:is="page"，component标签能够根据page的值动态渲染不同的组件。 page的初始值是"page1"，所以页面默认渲染page1组件。- 用户通过单选按钮选择不同的页面（
page1或page2），page的值会发生变化，Vue 会根据新的page值重新渲染相应的组件。
- 通过
-
响应式数据：
page变量是响应式的，绑定在单选按钮的v-model上。当用户选择不同的按钮时，page的值会发生改变。Vue 会自动追踪这个变化并更新 DOM。
-
组件切换：
- 使用
component :is="page"的语法，可以根据动态的数据渲染不同的组件。page1和page2组件的切换是通过page的值来控制的。 - 这种方式使得组件的展示可以非常灵活，可以通过不同的条件动态加载不同的内容。
- 使用
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）