Vue实现组件切换的两种方式介绍（附代码）

来源：化拓教育网

本篇文章给大家带来的内容是关于Vue实现组件切换的两种方式介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

Vue 的组件切换的几种方式

方式一： v-if 和 v-else 结合使用实现切换

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>Title</title>

 <script rel="script" src="js/vue-2.4.0.js"></script></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>
 *<!--定义登录组件-->*
 Vue.component('login',{
 template :'<h3>登陆组件</h3>'
 });

 *<!--定义注册组件-->*
 Vue.component('register',{
 template :'<h3>注册组件</h3>'
 });

 *<!--创建Vue实例-->*
 var vm = new Vue({
 el : '#app',
 data :{
 flag : true,
 },
 methods:{},
 });</script></body></html>

运行结果：点击登录或注册进入相应的组件模块

注意：使用 v-if 和 v-else 实现切换，只能在两个组件间相互切换，不能实现多个组件的切换

方式二： 使用Vue提供的component元素实现组件切换

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>Title</title>

 <script rel="script" src="js/vue-2.4.0.js"></script></head><body>
 <div id="app2">
 <!-- 链接修改comName的值-->
 <a href="" @click.prevent="comName = 'login' ">登陆2</a>
 <a href="" @click.prevent="comName = 'register' ">注册2</a>

 <!--
 component 是一个占位符， :is 属性，可以用来指定要展示的组件的名称
 -->
 <component :is=" comName "></component>
 </div><script>
 //组件名称是 字符串
 Vue.component('login',{
 template :'<h3>登陆组件</h3>'
 })

 Vue.component('register',{
 template :'<h3>注册组件</h3>'
 }) //实例
 var vm2 = new Vue({
 el : '#app2',
 data :{
 comName : 'login',//当前 component 中的 :is 帮i的那个的组件的名称
 },
 methods:{},
 });</script></body></html>

这种方式可以实现定义多个组件切换，需要注意的是，组件名称要对应