Vue組件-動態組件

動態組件

經過使用保留的 <component> 元素，動態地綁定到它的 is 特性，可讓多個組件使用同一個掛載點，並動態切換：

<div id="app6">
    <select v-model="currentComponent">
      <option value="home">home</option>
      <option value="post">post</option>
      <option value="about">about</option>
    </select>
    <component :is="currentComponent"></component>
  </div>
  <script>
      new Vue({ el: '#app6', data: { currentComponent: 'home' }, components: { home: { template: `<header>這是home組件</header>`
 }, post: { template: `<header>這是post組件</header>`
 }, about: { template: `<header>這是about組件</header>`
 } } }) </script>

也能夠直接綁定到組件對象上：

var Home = { template: `<header>這是home組件</header>`
} new Vue({ el: '#app6', data: { currentComponent: Home } })

保留切換出去的組件，避免從新渲染

若是把切換出去的組件保留在內存中，能夠保留它的狀態或避免從新渲染。爲此能夠添加一個 keep-alive 指令參數：

<keep-alive>
  <component :is="currentComponent">
    <!-- 非活動組件將被緩存！ -->
  </component>
</keep-alive>