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系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
随机推荐
- 感恩节活动中奖名单 i春秋喊你领礼物啦!
上周我们组织的感恩节活动,得到了小伙伴们积极踊跃的回复,看到你们这么真诚的留言,我们也是满满的感动,在众多留言中,我们选出了八位幸运用户,让我们一起恭喜获奖的小伙伴们吧. 恭喜以上8位幸运的小伙伴,我 ...
- 【从零开始搭建自己的.NET Core Api框架】(二)搭建项目的整体架构
系列目录 一. 创建项目并集成swagger 1.1 创建 1.2 完善 二. 搭建项目整体架构 三. 集成轻量级ORM框架——SqlSugar 3.1 搭建环境 3.2 实战篇:利用SqlSuga ...
- [Swift]LeetCode130. 被围绕的区域 | Surrounded Regions
Given a 2D board containing 'X' and 'O' (the letter O), capture all regions surrounded by 'X'. A reg ...
- [Swift]LeetCode923.三数之和的多种可能 | 3Sum With Multiplicity
Given an integer array A, and an integer target, return the number of tuples i, j, k such that i &l ...
- BBS论坛(三十二)
32.帖子排序功能完成 (1)front_index.html <ul class="post-group-head"> {% if current_sort==1 % ...
- Qt之二进制兼容
一.回顾 使用qt2年多了,但是还是觉得很陌生,总是会被qt搞的很紧张,有时候当我自信满满的打开帮助文档,搜索某个已知的类时,由于笔误敲错了一个字母而出现了另外一个类,不过奇怪的是还真有这么一个类,哎 ...
- 并发编程(十五)——定时器 ScheduledThreadPoolExecutor 实现原理与源码深度解析
在上一篇线程池的文章<并发编程(十一)—— Java 线程池 实现原理与源码深度解析(一)>中从ThreadPoolExecutor源码分析了其运行机制.限于篇幅,留下了Scheduled ...
- Leetcode 10. 正则表达式匹配 - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...
- 从零打卡leetcode之day 2---两数相加
前言 就是要把leetcode刷完,每天一道题,每天进步一点点. 从零打卡leetcode之day 2 题目描述: 给定两个非空链表来表示两个非负整数.位数按照逆序方式存储, 它们的每个节点只存储单个 ...
- 行为驱动:Cucumber + Selenium + Java(二) - 第一个测试
在上一篇中,我们搭建好了Selenium + Cucumber + Java的自动化测试环境,这一篇我们就赶紧开始编写我们的第一个BDD测试用例. 2.1 创建features 我们在新建的java项 ...