Vue官方文档，是一个值得反复去浏览研究的，今天在翻文档的时候，发现了动态组件，里面有一个属性是is。看了一下文档，上面说了is的两个作用！

动态切换不同的组件

官方文档给的是一个页签切换的demo，页签里面应该是不同的组件。

这里，我按照官方的demo，来写一个。

<template>
  <div>
    <div class="tab-header">
      <button @click="tabChange('Home')">Home</button>
      <button @click="tabChange('Posts')">Posts</button>
      <button @click="tabChange('Archive')">Archive</button>
    </div>
    <div class="tab-body" :is="active"></div>
  </div>
</template>
<script>
import Home from './views/Home.vue';
import Posts from './views/Posts.vue';
import Archive from './views/Archive.vue';
export default {
  //引入组件
  props: [],
  //引入混淆
  mixins: [],
  //import引入的组件需要注入到对象中才能使用
  components: {
    Home,
    Posts,
    Archive
  },
  data() {
    //这里存放数据
    return {
      active: 'Home'
    };
  },
  //方法集合
  methods: {
    tabChange(id){
      this.active = id
    }
  }
};
</script>

解析 DOM 模板

总所周知，有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

<ul>
  <my-component></my-component>
  <my-component></my-component>
</ul>

my-component是我们自己写的组件，但是html在渲染dom的时候，my-component对ul来说并不是有效的dom，会被作为无效的内容提升到外部，并导致最终渲染结果出错。正是因为html模板的限制，于是也可以使用is来做一个变通。

<ul>
  <li is='my-component'></li>
</ul>