在 Vue 3 中，如果你想在 HTML 页面中实现多个自定义组件之间的切换，你可以使用 Vue 的条件渲染功能，比如 v-if、v-else-if 和 v-else 指令，或者使用 <component> 标签结合 is 属性来动态绑定组件。
1. 打开HBuilder X
图1
2. 新建一个空项目
文件->新建->项目->uni-app
填写项目名称：vue3demo
选择项目存放目录：D:/HBuilderProjects
一定要注意vue的版本，当前选择的版本为vue3
图2
点击“创建”之后进入项目界面
图3
其中各文件的作用
（1）pages是存放页面的文件夹
（2）Static是存放图片等资源的文件夹
（3）Manifest.json是项目的配置文件
（4）Pages.json是项目的页面配置文件
3. 新建自定义组件
（1）新建组件存放的文件夹。在项目vue3demo上右键->新建->目录，目录名称：components（不能更改）。
（2）定义自定义组件。假设有两个组件ComponentA和ComponentB。在目录components上右键->新建组件，组件名称为：ComponentA.vue。
图4
ComponentA.vue的代码如下：
<template ><view class="table"><h3>登录</h3>用户名：<input class="input" type="text"/>密 码：<input class="input" type="safe-password"/><button class="btn">登录</button></view>
</template><script>export default {name:"ComponentA",data() {return {};}}
</script><style>.table{width: 300px;height: 200px;border: 1px solid #ccc;text-align: center;}.input{border: 1px solid #ccc;}.btn{margin: 10px;background-color: aquamarine;}
</style>
图5
主要包含三个部分
- <template>组件界面内容
- <script>组件绑定数据
- <style>设定组件界面的样式
（3）同样的方法新建其他组件，在项目vue3demo上右键->新建组件，组件名称为：ComponentB.vue。代码如下：
<template ><view class="table"><h3>注册</h3>用户名：<input class="input" type="text"/>密 码：<input class="input" type="safe-password"/><button class="btn">注册</button></view>
</template><script>export default {name:"ComponentB",data() {return {};}}
</script><style>.table{width: 300px;height: 200px;border: 1px solid #ccc;text-align: center;}.input{border: 1px solid #ccc;}.btn{margin: 10px;background-color: aquamarine;}
</style>4. 在主应用中使用条件渲染
在你的主应用组件（比如index.vue）中，你可以使用v-if和v-else来根据某个条件（比如一个数据属性）来切换这两个组件。在pages/index/index.vue页面中写入代码：
<template><div id="app"><button @click="currentComponent = 'ComponentA'">显示ComponentA</button><button @click="currentComponent = 'ComponentB'">显示ComponentB</button><!-- 使用 v-if 和 v-else 来切换组件 --><component :is="currentComponent"></component><!-- 或者你也可以使用 v-if 和 v-else-if 单独控制每个组件 --><!--<ComponentA v-if="currentComponent === 'ComponentA'" /><ComponentB v-else-if="currentComponent === 'ComponentB'" />--></div>
</template><script>
import ComponentA from '../../components/ComponentA.vue';
import ComponentB from '../../components/ComponentB.vue';export default {name: 'App',components: {ComponentA,ComponentB},data() {return {currentComponent: 'ComponentA' // 初始显示的组件};}
};
</script>主要包括四个部分：
- <template>显示和切换组件的界面
- <script>引入、注册和绑定组件
效果如图：
图6
在这个例子中，我们有两个按钮，每个按钮都绑定了一个点击事件处理器，用于更改 currentComponent 数据属性的值。<component :is="currentComponent"></component>这行代码会根据currentComponent 的值来动态渲染相应的组件。
你也可以选择使用 v-if 和 v-else-if 单独控制每个组件的渲染，但这通常会增加模板的复杂性，特别是在你有多个组件需要切换时。使用<component>标签和is属性是一种更简洁且可扩展的方法。
5. 运行看效果
运行->运行到浏览器->Edge
图7
单击选择“显示ComponentB”
图8