组件切换方式（Vue.js）
程序员文章站
2022-06-13 19:17:42
这里，我用一个注册登录两组件的切换实例来演示： 切换方式一 这个方式唯一的缺陷就是只能在两个组件之前切换，当要求需要三个及三个以上的组件切换的时候，这就不行了(原因是 flag 只有 true 和 false 两个值)，这就要要使用 方式二了。 切换方式二 这里，我们需要学到一个 Vue 官方 提供 ......
这里，我用一个注册登录两组件的切换实例来演示：
切换方式一
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
</head>
<body>
<div id="app">
<a href="#" @click.prevent="flag = true">登录</a>
<a href="#" @click.prevent="flag = false">注册</a>
<!-- 默认显示 登录组件 -->
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
vue.component('login', {
template: '<h3>登录组件</h3>'
});
vue.component('register', {
template: '<h3>注册组件</h3>'
});
const vm = new vue({
el: '#app',
data: {
flag: true
},
});
</script>
</body>
</html>
这个方式唯一的缺陷就是只能在两个组件之前切换，当要求需要三个及三个以上的组件切换的时候，这就不行了(原因是 flag 只有 true 和 false 两个值)，这就要要使用 方式二了。
切换方式二
这里，我们需要学到一个 vue 官方 提供的 元素 component。
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
</head>
<body>
<div id="app">
<a href="#" @click.prevent="comname = 'login'">登录</a>
<a href="#" @click.prevent="comname = 'register'">注册</a>
<!--
vue 提供的 component 来展示对应名称的组件
component 是一个占位符
:is 属性指定 组件名称
-->
<component :is="comname"></component>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
// 组件名称是字符串
vue.component('login', {
template: '<h3>登录组件</h3>'
});
vue.component('register', {
template: '<h3>注册组件</h3>'
});
const vm = new vue({
el: '#app',
data: {
comname: 'login'// 当前 component 中的 :is 绑定的组件名称
},
});
</script>
</body>
</html>
现在，我们在添加一个退出组件（这是为了证明第二种组件切换方式的好处）
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>独秀不爱秀</title>
</head>
<body>
<div id="app">
<a href="#" @click.prevent="comname = 'login'">登录</a>
<a href="#" @click.prevent="comname = 'register'">注册</a>
<a href="#" @click.prevent="comname = 'out'">退出</a>
<!--
vue 提供的 component 来展示对应名称的组件
component 是一个占位符
:is 属性指定 组件名称
-->
<component :is="comname"></component>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
// 组件名称是字符串
vue.component('login', {
template: '<h3>登录组件</h3>'
});
vue.component('register', {
template: '<h3>注册组件</h3>'
});
vue.component('out', {
template: '<h3>退出组件</h3>'
});
const vm = new vue({
el: '#app',
data: {
// 默认显示 登录组件
comname: 'login'// 当前 component 中的 :is 绑定的组件名称
},
});
</script>
</body>
</html>
切换成功。