组件切换方式（Vue.js）
生活随笔
收集整理的這篇文章主要介紹了
组件切换方式（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>切換成功。
轉載于:https://www.cnblogs.com/duxiu-fang/p/11327248.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的组件切换方式（Vue.js）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： P1488 肥猫的游戏
- 下一篇： 如何快速查找 iMessage 信息中的