Vue动态组件 / Vue中is属性的作用

动态组件

针对于同一个组件挂载点，多个组件可以动态的切换，称为动态组件。

下面是 官方文档 中对于动态组件举的例子：

模拟官网例子的实现

动态组件可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：

<div id="app">
  <div class="btn-wrap">
     <button @click="changeTabComponent('home')">Home</button>
     <button @click="changeTabComponent('posts')">Posts</button>
     <button @click="changeTabComponent('archive')">Archive</button>
   </div>
   <component :is="activeComponent" style="border: 1px solid #ccc;padding: 10px;"></component>
</div>

<script type="text/javascript">
  var Home = {
   template:`<div>Home Component</div>`}