动态组件 :is与is区别 vue.js

首先举个栗子：

众所周知，ul嵌套li标签正常的写法是这样的

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

但是，在特殊需求上，我们要这样：

<ul>
    <nav-cont></nav-cont>
    <nav-cont></nav-cont>
    <nav-cont></nav-cont>
</ul>

可是呢，ul标签嵌套nav-cont组件，当html渲染dom时发现ul标签和nav-cont标签不是一套的是无效的，这样可能会导致浏览器报错，于是is就诞生了

为什么要使用is?

　　在vue的官网组件部分中，有明确的描述：当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像<ul>、<li>、<ol>、<table>、<selsec>  这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。通俗一点讲，就是“龙生龙，凤生凤，老鼠的儿子会打洞”，特殊的一下父元素如<ul>、<ol>、<table>、<selset>里面不能包含不属于它的子元素，而与之相对应的<li>、<tr>、<opyion>只可以出现在特定的父元素里面。

上代码:

<!-- 1 is -->
<!-- 这里就幻想一下有个组件名为 nav-cont 的组件-->
<ul>
    <li is='nav-cont'></li>
    <li is='nav-cont'></li>
</ul>


<!-- 2 v-bind:id 简写为 :is="组件名变量" -->
<!-- 这里就幻想一下有个变量名为 nav-cont 的组件-->
<ul>
    <li :is='nav-cont'></li>
    <li :is='nav-cont'></li>
</ul>


<!-- 1和2的写法，页面渲染时都会变为： -->
<ul>
    <nav-cont></nav-cont>
    <nav-cont></nav-cont>
</ul>

内置指令v-bind | Vue.js

总结：

is--直接传递一个组件

:is--vue实例的data里找到相对应的值，用这个值再去所有的component里找到对应的组件

此文章有引用Vue组件的is具体用法