The Vue is

The official explanation: for dynamic components and template-based restrictions in the DOM to work.

I understand there is no official explanation, through exploration, summed up the effect is of two.

1. DOM parsing templates: remove the restriction element

Means that some elements, such as ul li elements which can be included directly, like this:

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

But not:

<ul>
    <your-component>
</ul>

This can not reuse the components of this component, and if you want to achieve our objective, we will use the properties is like this:

<ul>
    <li is="your-component"></li>
</ul>

Custom components in some cases will be treated as invalid content, and therefore can lead to erroneous rendering results, alternative solution is to use special is characteristic.
We can write:

//声明一个组件
new Vue({
    components:{
        'component-name':{
           template:'<p>你好，这是一个示例</p>' 
        }
    }
})
 
// ul下使用组件
<ul>
    <li is="component-name"></li>
</ul>

Some HTML elements, such as

、
, And for which elements can appear inside it is strictly limited. And some elements, such as
1. 、
And, it can only occur within certain other specific elements.

2. dynamic switching of different components

<div id="app">
    <button @click="changeComponent('component1')">A</button>
    <button @click="changeComponent('component2')">B</button>
     <!-- 通过is特性,可以动态切换当前组件  -->
    <div v-bind:is="currentView"></div>
      <!-- v-bind:动态绑定属性  -->
</div>

//引入组件
import component1 from '../....';
import component2 from '../....';
export default {
 data(){
 return {
    currentView:'component1'
     //当前组件
  } 
 },
 methods:{
     changeComponent(component){
     this.currentView=component;
         //点击按钮,动态切换不同的组件
    }
 }
 components:{
     component1,
     component2
 }
}