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>
会被当作无效的内容,因此会导致错误的渲染结果。变通的方案是使用特殊的 is
特性:
<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具体用法的更多相关文章
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件的基础用法(火柴)
前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...
- Vue组件的继承用法
Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...
- vue组件讲解(is属性的用法)
什么是组件? 在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的. 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可以重复使用的代码.在较高层次 ...
- 关于vue 自定义组件的写法与用法
最近在网上看到很多大神都有写博客的习惯,坚持写博客不但可以为自己的平时的学习做好记录积累 无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴!当然本人能力实在有限写出的文章 ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 【vue系列之三】从一个vue-pdf-shower,说说vue组件和npm包
前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
随机推荐
- [Swift]LeetCode129. 求根到叶子节点数字之和 | Sum Root to Leaf Numbers
Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...
- [Swift]LeetCode829. 连续整数求和 | Consecutive Numbers Sum
Given a positive integer N, how many ways can we write it as a sum of consecutive positive integers? ...
- 一个简单IP防刷工具类, x秒内最多允许y次单ip操作
IP防刷,也就是在短时间内有大量相同ip的请求,可能是恶意的,也可能是超出业务范围的.总之,我们需要杜绝短时间内大量请求的问题,怎么处理? 其实这个问题,真的是太常见和太简单了,但是真正来做的时候,可 ...
- RabbitQM(消息duilie)
前言:RabbitMQ 是实现 AMQP(Advanced Message Queuing Protocol 高级消息队列协议)的消息中间件的一种,最初起源于金融系统,用于在分布式系统中存储转发消息, ...
- mysql主从集群配置
1.二进制日志 主: #master vim /etc/mysql/my.cnf #server-id server-id=2 #二进制日志 log-bin=musql-bin#statement r ...
- 记一次尴尬的git reset丢失分支故障
最近...似乎一直在踩坑... 也不是什么故障,只是把一个分支的功能弄没了,之后在reflog里找到又恢复了. 产生原因是有同事错误地把分支B merge到了分支A并push. 我直接在分支A上res ...
- Python内置函数(18)——enumerate
英文文档: enumerate(iterable, start=0) Return an enumerate object. iterable must be a sequence, an itera ...
- spark在idea中本地如何运行?(处理问题NoSuchFieldException: SHUTDOWN_HOOK_PRIORITY)
spark在idea中本地如何运行? 前几天尝试使用idea在本地运行spark+scala的程序,出现了问题,http://www.cnblogs.com/yjf512/p/7662105.html ...
- 8分钟学会使用AutoMapper
一.什么是AutoMapper与为什么用它. 它是一种对象与对象之间的映射器,让AutoMapper有意思的就是在于它提供了一些将类型A映射到类型B这种无聊的实例,只要B遵循AutoMapper已经建 ...
- qt 坐标变换
原文链接:Qt学习之路(28): 坐标变换 同很多坐标系统一样,QPainter的默认坐标的原点(0, 0)位于屏幕的左上角,X轴正方向是水平向右,Y轴正方向是竖直向下.在这个坐标系统中,每个像素 ...