当前位置：首页 > article >正文

Vue 3中实现多个自定义组件之间的切换

article 2024/11/29 2:00:47

在 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"/>
		密&nbsp;码：<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"/>
		密&nbsp;码：<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>

主要包括四个部分：