vue動態(tài)組件

<template>
  <p id="app">
   <component :is="currentView"></component>
   <button @click="changeView('A')">切換到A</button>
   <button @click="changeView('B')">切換到B</button>
   <button @click="changeView('C')">切換到C</button>
  </p>
</template>

<script>
var app = new Vue({
 el: '#app',
 data: {
  currentView: 'comA'
 },
 methods: {
  changeView: function(data){
   this.currentView = 'com'+ data　　//動態(tài)地改變currentView的值就可以動態(tài)掛載組件了。
  }
 },
 components: {
  comA: {
   template: '<p>組件A</p>'
  },
  comB: {
   template: '<p>組件B</p>'
  },
  comC: {
   template: '<p>組件C</p>'
  }
 }
});
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容