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>