Vue.js组件切换方式
这里，我用一个注册登录两组件的切换实例来演示：
切换方式一
<!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>切换成功。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
