Vue组件的is具体用法

2018-06-24 01:46:33来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript实现深拷贝(深复制) 面试题

下一篇:1分钟学会移动端rem的使用