簡單動態元件示例

使用 <component> 元素動態切換多個元件之間的 beet 並將資料傳遞給 v-bind：is 屬性：

使用 Javascript：

new Vue({
  el: '#app',
  data: {
    currentPage: 'home'
  },
  components: {
    home: {
      template: "<p>Home</p>"
    },
    about: {
      template: "<p>About</p>"
    },
    contact: {
      template: "<p>Contact</p>"
    }
  }
})

HTML：

<div id="app">
   <component v-bind:is="currentPage">
       <!-- component changes when currentPage changes! -->
       <!-- output: Home -->
   </component>
</div>

片段：

現場演示