vuejs组件间的切换方法
vuejs组件间的切换方法有两种,分别对应两个组件之间的切换和多个组件切换。
两个组件之间的切换:
我们通过v-if和v-else进行切换两个组件的显示,如果v-if为true时显示否则显示另外一个,这里由于true不能写死,所以给写flag,控制flag的真假变换。
<login v-if="flag"></login> <register v-else></register>
然后我们定义两个组件,然后vue的对象里定义一个flag,控制flag的真假变化来达到切换。
<script> Vue.component('login', { template: '<h1>登录</h1>' }) Vue.component('register', { template: '<h1>注册</h1>' }) //在vue对象里设置flag属性,属性值默认为true var vm = new Vue({ el: '#main', data: { flag: true, } }) </script>
然后在div里进行显示,这时候显示的是“登陆,”当点击“注册”时触发click方法,把flag为false传递给组件内的flag,则flag变成了假。
<div id="main" v-cloak> <a href="" @click.prevent="flag=true">登录</a> <a href="" @click.prevent="flag=false">注册</a> <login v-if="flag"></login> <register v-else></register> </div>
“注册”原理亦同。
多个组件之间的切换:
多个组件用component标签显示,component有个is属性,给它定义一个com值,控制com的变化来达到切换目的。
<component :is="com"></component>
我们先创建三个组件,然后在vue对象里设置com的值,这里默认给它设置为“登陆”。
<script> Vue.component('login', { template: '<h1>登录</h1>' }) Vue.component('register', { template: '<h1>注册</h1>' }) Vue.component('register2', { template: '<h1>注册2</h1>' }) var vm = new Vue({ el: '#main', data: { msg: 'Hello Vue1', com: 'login' } }) </script>
在div里写如下代码,通过点击粗发click事件,改变com的值。
<div id="main" v-cloak> <a @click.prevent="com='login'">登录</a> <a @click.prevent="com='register'">注册</a> <a @click.prevent="com='register2'">注册2</a> <component :is="com"></component> </div>
完整代码如下:
<div id="main" v-cloak> <a @click.prevent="com='login'">登录</a> <a @click.prevent="com='register'">注册</a> <a @click.prevent="com='register2'">注册2</a> <component :is="com"></component> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('login', { template: '<h1>登录</h1>' }) Vue.component('register', { template: '<h1>注册</h1>' }) Vue.component('register2', { template: '<h1>注册2</h1>' }) var vm = new Vue({ el: '#main', data: { com: 'login' } }) </script>