Vue组件的is具体用法

1.为何要使用is

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

　　那么，有人会问了，这和咱们的is有半毛钱关系么？普通的时候是没有一毛钱关系的，可是在许多特定的时候，有直接的关系。

　　咱们在日常的代码中，通常不会将tr封装为一个组件去使用，能够直接使用“v-for”指令去完成对选项列表的渲染。可是，当咱们有了特定的需求的要求，好比这个tr的子元素td的一些部分我须要进行操做，可是tr的数量可能不少条或者不明确tr的数量时，咱们没法对其操做项进行绑定，那么咱们只能对其进行组件化，将其封装成一个组件，使用特定的方式好比this.$emit加porps的方式进行数据交流。

　　那么问题就出现了，以下：

　　我在定义了子组件my-tr：

　　并在父组件中用正常的方式引用，Vue.component('my-tr', Tr)：

　　仿佛一切都是正确的，可是当咱们看到效果的时候就会发现：

　　此时检查DOM结构就会发现<tr>未在<table>中。

　　问题就出在了文章开始咱们说的：像 <ul>、<ol>、<table>、<select> 这样的元素里容许包含的元素有限制，而另外一些像 <option> 这样的元素只能出如今某些特定元素的内部。在自定义组件中使用这些受限制的元素时会致使一些问题，例如：

<table> <my-row>...</my-row> </table>

　　自定义组件 <my-row> 会被看成无效的内容，所以会致使错误的渲染结果。变通的方案是使用特殊的 is 特性：

<table> <tr is="my-row"></tr> </table>

　　应当注意，若是使用来自如下来源之一的字符串模板，则没有这些限制：

• <script type="text/x-template">
• JavaScript 内联模板字符串
• .vue 组件

　　所以，请尽量使用字符串模板。

　　这就用到了本文的中心“is”，当咱们使用<tr is="my-tr" v-for="(man,key) in mans" :man="man" :key="key"></tr>引入插件，而不是<my-tr></my-tr>时，一切就正常了。