Vue组件的is具体用法

时间：2024-01-03 09:37:56

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组件的is具体用法

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

Vue组件的is具体用法

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

Vue组件的is具体用法

　　此时检查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>时，一切就正常了。

相关文章