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> 这样的元素里允许包含的元素有限制,而另一些像 这样的元素只能出现在某些特定元素的内部。在自定义组件中使用这些受限制的元素时会导致一些问题,例如:

<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>时,一切就正常了。

原文链接:
Vue组件的is具体用法

猜你喜欢

转载自blog.csdn.net/weixin_45121510/article/details/108219575