當前位置：首頁 > 前端技术 > vue >内容正文

vue

组件切换方式（Vue.js）

發布時間：2023/12/2 vue 35 豆豆

生活随笔收集整理的這篇文章主要介紹了组件切换方式（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><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><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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。