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

动态组件

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

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

模拟官网例子的实现

动态组件可以通过 Vue 的 元素加一个特殊的 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:`
Home Component
`}
  var Posts = {
     template:`
Posts Component
`}
  var Archive = {
     template:`
Archive Component
`}
  var app = new Vue({
     
      el: '#app',
      components: {
     
        'home': Home,
        'posts': Posts,
        'archive': Archive
      },
      data() {
     
        return {
     
          activeComponent: 'home'
        }
      },
      methods:{
     
        changeTabComponent(currentComponent){
     
          this.activeComponent =  currentComponent;
        }
      }
  })
</script>

特殊的is属性

is属性的值可以是以下的两种：

• 1.已注册组件的名字
• 2.一个组件的选项对象

在上面的例子中，is属性绑定的值为第一种情况，也就是已注册组件的名字。值也可以是一个组件的选项对象，还是模拟官网提供的 例子 ：

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

<script type="text/javascript">
   var componentTabs = [
     {
     
       name:'Home',
       component:{
     
         template:`
Home Component
`
       }
     },
     {
     
       name:'Posts',
       component:{
     
         template:`
Posts Component
`
       }
     },
     {
     
       name:'Archive',
       component:{
     
         template:`
Archive Component
`
       }
     }
   ]
   var app = new Vue({
     
       el: '#app',
       data() {
     
         return {
     
           componentTabs,
           activeComponent:componentTabs[0]
         }
       },
       methods:{
     
         changeTabComponent(index){
     
           this.activeComponent =  this.componentTabs[index];
         }
       }
   })
 </script>

is属性的其他用法

is属性除了可以作用域vue提供的元素之外，也可以作用在常规的HTML元素，例如

、等。
但是还有一些特殊的HTML元素，来一张 官网 贴图：

意思就是说，针对于一些特殊的HTML元素，我们只能像下面这样:

<ul>
  <li></li>
</ul>

而不能像下面这样使用：

<ul>
  <my-componet></my-componet>
</ul>

但是有了这个is属性，我们可以这样使用，从而增强组件的复用性：

<ul>
   <li is="my-componet"></li>
</ul>

DOM解析时的元素限制：

实际上，Vue模板等同于DOM模板，在解析Vue模板时，要遵循所有DOM解析时的限制。由于dom的一些html元素对放入它里面的元素有限制，所以导致有些组件没办法放在一些标签中，比如

、、 、等等这些标签中，所以需要增加is特性来扩展，从而达到可以在这些受限制的html元素中使用。例如：

<ul>
   <li is="my-componet"></li>
</ul>