前言
在日常實際開發中，常會遇到組件切換的需求，如：
1. 點擊按鈕后，登錄組件的切換，切換不同登錄方式；
2. tab切換選項卡；
方法一：使用 v-if, v-else（點擊按鈕顯示不同登錄組件）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <div id="app"> <!-- 給input添加key, 是為了讓其相互獨立，從而解決在一個input中輸入信息切換后，當前input還保留之前輸入的信息 --> <template v-if='loginType'> <div> <label for="username">用戶名：</label> <input type="text" id="username" key='username-input' placeholder="enter your usernmae" /> </div> <div> <label for="password">密碼：</label> <input type="password" id="password" key='password-input' placeholder="enter your password" /> </div> </template> <!-- <hr> --> <template v-else> <div> <label for="phoneNumber">手機號：</label> <input type="text" id="phoneNumber" key='phone-input' placeholder="enter your phone number" /> </div> <div> <label for="codeNumber">驗證碼：</label> <input type="text" id="codeNumber" key='code-input' placeholder="enter your code" /> </div> </template> <hr> <button type="button" @click='doSomething'>click me</button> </div> <script src="https://cdn.staticfile.org/vue/2.5.1/vue.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { loginType: true }, methods: { doSomething() { if(this.loginType === true) { this.loginType = false } else { this.loginType = true } } } }) // this指向vm; vm.name; vm.age </script> </body> </html>
注：示例代碼中給input加key，是為了讓其相互獨立，從而解決在input中輸入信息數據殘留的問題，
如輸入用戶名和密碼后，點擊按鈕切換為手機號和驗證碼登錄，此時不輸入再切換回去，之前輸入的信息會被清空，而不會留存
方法二：使用 is 動態組件（點擊按鈕顯示不同登錄組件）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>is動態組件實現切換</title> </head> <body> <div id="app"> <!-- 動態組件是一個有趣的東西，它相當於一張空白的組件，只要你告訴它它是什么組件，它就變成了什么組件。 有時候我們希望發生了xxx事件之后，頁面的某個組件變成另一個組件。【你可能會產生如下圖的需求：點擊按鈕，切換登錄方式】 --> <!-- 我們只需要給component元素設置上is屬性就可以把component元素渲染成目標組件了。 <component :is='組件名'></component>如果改變了is屬性的值，那么渲染的組件就會發生變化。 is可以是v-bind的，也可以是非v-bind的，如果希望它是動態可變化的，那么應該使用v-bind:is， 這樣才能傳入一個變量，從而動態渲染組件。【非v-bind的時候傳入的值會被認為一個字符串，然后直接把這個字符串認為是組件名】--> <!-- 重新創建動態組件的行為通常是非常有用的，但是在這個案例中，我們更希望那些標簽的組件實例能夠被在它們第一次被創建的時候緩存下來。 為了解決這個問題，我們可以用一個 <keep-alive> 元素將其動態組件包裹起來 --> <keep-alive> <component :is='loginType'></component> </keep-alive> <hr> <button type="button" @click='tabChange'>tabchange</button> </div> <script src="https://cdn.staticfile.org/vue/2.5.1/vue.min.js"></script> <script> Vue.component('loginInfo', { template: `<div> <div>用戶名：<input type='text' /></div> <div>密碼：<input type='password' /></div> </div>` }) Vue.component('phoneInfo', { template: `<div> <div>手機號：<input type='text' /></div> <div>驗證碼：<input type='text' /></div> </div>` }) var vm = new Vue({ el: '#app', data: { loginType: 'loginInfo' }, methods: { tabChange() { this.loginType = this.loginType === 'loginInfo'? 'phoneInfo': 'loginInfo' } } }) // this指向vm; vm.name; vm.age </script> </body> </html>
注：與方法一中示例demo中不同的是，這里使用<keep-alive>是為了把input中輸入的信息緩存起來，即使切換后也不會清空
方法三：使用路由router實現tab切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue-router</title> <style> .nav { float: left; width: 300px; height: 300px; background-color: black; } .nav a { color: #fff; } .content { width: 600px; height: 300px; background-color: red; } </style> </head> <body> <div id="app"> <!-- 路由用於設定訪問路徑，並將路徑和組件映射起來，這樣就可以實現通過路由router來切換組件 --> <!--使用 router-link 組件來導航.--> <!-- 通過傳入 `to` 屬性指定鏈接. --> <div class="nav"> <router-link to="/vue">簡易vue</router-link> <router-link to="/es6">趣味ES6</router-link> <router-link to="/career">人在職場</router-link> </div> <div class="content"> <!-- 匹配到的組件將渲染在這里 --> <router-view></router-view> </div> </div> <script src="https://cdn.staticfile.org/vue/2.5.1/vue.min.js"></script> <script src="https://unpkg.com/vue-router@2.5.3/dist/vue-router.js"></script> <script> // 局部注冊3個組件 const vueComponent = { template: `<div> 這里是《簡易vue》教程 </div>` }; const es6Component = { template: `<div> 這里是《趣味ES6》教程 </div>` } const careerComponent = { template: `<div> 《混口飯吃》與《工資待遇》 </div>` } //創建router實例，並定義導航和組件的映射關系 const router = new VueRouter({ //配置routes routes: [ //定義3個導航和組件的映射關系 { path: '/vue', component: vueComponent }, { path: '/es6', component: es6Component }, { path: '/career', component: careerComponent } ] }) //創建vue實例，注入路由router const vm = new Vue({ el: '#app', router //此處是ES6語法，相當於router:router }) </script> </body> </html>
有需要的朋友可以領取支付寶到店紅包，能省一點是一點
