當(dāng)前位置：
首頁 >
组件切换方式（Vue.js）
發(fā)布時間：2023/12/2
42
豆豆
生活随笔
收集整理的這篇文章主要介紹了
组件切换方式（Vue.js）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這里，我用一個注冊登錄兩組件的切換實(shí)例來演示：
切換方式一
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><title>獨(dú)秀不愛秀</title> </head><body><div id="app"><a href="#" @click.prevent="flag = true">登錄</a><a href="#" @click.prevent="flag = false">注冊</a><!-- 默認(rèn)顯示 登錄組件 --><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>這個方式唯一的缺陷就是只能在兩個組件之前切換，當(dāng)要求需要三個及三個以上的組件切換的時候，這就不行了(原因是 flag 只有 true 和 false 兩個值)，這就要要使用 方式二了。
切換方式二
這里，我們需要學(xué)到一個 Vue 官方 提供的 元素 component。
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><title>獨(dú)秀不愛秀</title> </head><body><div id="app"><a href="#" @click.prevent="comName = 'login'">登錄</a><a href="#" @click.prevent="comName = 'register'">注冊</a><!-- Vue 提供的 component 來展示對應(yīng)名稱的組件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'// 當(dāng)前 component 中的 :is 綁定的組件名稱 },});</script> </body></html>現(xiàn)在，我們在添加一個退出組件（這是為了證明第二種組件切換方式的好處）
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><title>獨(dú)秀不愛秀</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 來展示對應(yīng)名稱的組件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: {// 默認(rèn)顯示 登錄組件comName: 'login'// 當(dāng)前 component 中的 :is 綁定的組件名稱 },});</script> </body></html>切換成功。
轉(zhuǎn)載于:https://www.cnblogs.com/duxiu-fang/p/11327248.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的组件切换方式（Vue.js）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： P1488 肥猫的游戏
- 下一篇： vue - cli 脚手架安装