Vue中元件的切換
阿新 • • 發佈：2018-11-15
文章目錄
此處的元件切換使用的是Vue中的component元件中的is屬性來實現的。該is屬性實現的功能是根據元件名稱的不同來切換顯示不同的元件控制元件。
示例
原始碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元件</title> </head> <body> <template id="demo1"> <h2>元件1</h2> </template> <template id="demo2"> <h2>元件2</h2> </template> <div id="app"> <a href="javascript:void(0)" @click="componentName = 'demo1'">元件1</a> | <a href="javascript:void(0)" @click="componentName = 'demo2'">元件2</a> <component :is="componentName"></component> </div> <script src="../../../js/vue/vue/1.0/vue.js"></script> <script type="application/javascript"> //元件1 Vue.component('demo1',{ template:'#demo1' }); //元件2 Vue.component('demo2',{ template:'#demo2' }); //建立Vue物件 new Vue({ el:'#app' ,data:{ componentName:'' } }); </script> </body> </html>
結果
分析
上面該程式碼實現的功能是，當我點選元件1連結時，其會切換元件1展示內容，當我點選元件2時，其會切換元件2展示內容，以此來實現點選不同的連結，跳轉展示不同的元件內容。
在上面的程式碼中，由於a標籤自己預設有一個點選響應事件href此時我們在使用時為了不觸發其自身預設的點選響應事件，因而我們會將該事件的返回型別置空，即標記成javascript:void(0)
在a標籤中，由於在href和@click屬性都是表示此處可填寫js程式碼塊，因而在這裡我們不僅僅可以填寫函式的呼叫方法，我們還可以直接在此處填寫js，比如填寫componentName = 'demo2'
this.componentName = 'demo2';因而我們在此處使用後一種方式也是正確的。
在component中的:is其實全稱是v-bind:is，其是一個條件判斷，返回的是一個布林型別的資料。其就是用來判斷componentName所指明的控制元件是否為真，如果是，則進行相應的展示。
通過上述的幾個功能，我們以此來實現Vue中控制元件的切換展示操作。