您的位置：首页 > Web前端 > Vue.js

28vue学习——component 元素实现两个以上的组件切换

2019-08-05 22:19 573 查看

28vue学习——component 元素实现两个以上的组件切换

前言：
在上一篇文章中我们学习了如何使用 v-if 和 v-else 来实现两个组件之间的切换。但是当我们的组件个数多于两个的时候 v-if 和 v-else 是无法实现切换效果的。不过别担心，vue 为我们提供了component 元素，他就可以帮我们实现多个组件之间的切换。

1.代码：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>组件切换</title>
</head>

<body>
<div class="body">
<input type="button" value="登录" @click="name='login'">
<input type="button" value="注册" @click="name='register'">
<input type="button" value="首页" @click="name='index'">

<!-- 使用 component 元素实现组件之间的切换 -->
<component :is="name"></component>
</div>

<!-- 登录组件 -->
<template id="login">
<h3>我是登录组件</h3>
</template>

<!-- 注册组件 -->
<template id="register">
<h3>我是注册组件</h3>
</template>

<!-- 首页组件 -->
<template id="index">
<h3>我是首页组件</h3>
</template>

<script src="../lib/vue-2.4.0.js"></script>
<script>
/* 登录组件 */
Vue.component("login", {
template: "#login"
})
/* 注册组件 */
Vue.component("register", {
template: "#register"
})
/* 首页组件 */
Vue.component('index', {
template: "#index"
})

let vm = new Vue({
el: ".body",
data: {
name:'login'
}
})
</script>
</body>

</html>

效果：

讲解：
（1）定义三个不同的组件

（2）在 vue 实例的控制区域中写入 component 元素，设置 is 属性（需要通过 v-bind 进行数据绑定），其值为将要显示的组件的名称

（3）在 data 中定义一个 name 值，其初始值为 ‘login’（注意要用引号包裹起来）

（4）为各个按钮设置事件绑定，点击时修改 name 为对应的值（注意 name 的值要用引号包裹起来）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航