vue中is的使用

更新：Vue3中，使用v-is指定组件。注意！！！v-is后是JavaScript字符串，双重引号！

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

注意：以下属于vue2中的语法！

vue中is的使用

在某些元素内部，有特定的包裹元素规范，不能包裹其他元素。比如ul内只能包含li，而不能使用自定义组件。也就是说，这样是不允许的：

// ul内只能包含li
<ul>
	<li></li>
</ul>

// 不允许
<ul>
	<my-component></my-component>
</ul>

为了能够复用自定义的组件，需要使用is来指定组件：

// ul里面使用自定义组件
<ul>
	<li is="my-component"></li>
</ul>

:is和is的区别

在使用自定义组件的时候，给自定义组件绑定is属性后，

// 内置组件component绑定:is属性来加载不同的组件
<component :is="componentId">
</component>

实际使用：

// 动态组件加载。<component>说明这是个组件，具体加载哪个，由v-bind:is指定的名称确定。
<component v-bind:is="current"></component>

意思是去创建的vue实例对象的data里找值为current的属性并进行替换：

var vm = new Vue({
	el: '#app',
	data() {
		return {
			current: 'sub'
		}
	}
})

也就是变成：

<component is="sub"></component>
// 当前的component会被渲染成sub组件的内容

而如果是

<component is="current"></component>

则是直接表面该组件应当加载为名称为current的自定义组件。