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系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...
随机推荐
- 利用 python 实现对web服务器的目录探测
一.pythonPython是一种解释型.面向对象.动态数据类型的高级程序设计语言.python 是一门简单易学的语言,并且功能强大也很灵活,在渗透测试中的应用广泛,让我们一起打造属于自己的渗透测试工 ...
- [Java]LeetCode116. 填充同一层的兄弟节点 | Populating Next Right Pointers in Each Node
Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...
- [Swift]LeetCode324. 摆动排序 II | Wiggle Sort II
Given an unsorted array nums, reorder it such that nums[0] < nums[1] > nums[2] < nums[3]... ...
- [Swift]LeetCode987. 二叉树的垂序遍历 | Vertical Order Traversal of a Binary Tree
Given a binary tree, return the vertical order traversal of its nodes values. For each node at posit ...
- 微信公众号的开发 Senparc.Weixin.dll使用
项目需要,做个微信公众号,之前从未做过,前期挺懵的,再次记录一下,一切困难都是纸老虎(哈哈) 服务号是公司申请的微信公共账号,订阅号是个人申请的.建议开发者自己申请一个测试账号,方便使用,但是测试账号 ...
- JVM基础系列第7讲:JVM 类加载机制
当 Java 虚拟机将 Java 源码编译为字节码之后,虚拟机便可以将字节码读取进内存,从而进行解析.运行等整个过程,这个过程我们叫:Java 虚拟机的类加载机制.JVM 虚拟机执行 class 字节 ...
- javascript中的栈、队列。
javascript中的栈.队列 栈方法 栈是一种LIFO(后进先出)的数据结构,在js中实现只需用到2个函数 push() 接受参数并将其放置 ...
- Java基础14:离开IDE,使用java和javac构建项目
更多内容请关注微信公众号[Java技术江湖] 这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux ...
- 详解 Symbol 类型
ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如果有一种机制,保证 ...
- sql distinct详解以及优化
一.distinct简介 distinct这个关键字来过滤掉多余的重复记录只保留一条,但往往只用 它来返回不重复记录的条数,而不是用它来返回不重记录的所有值.其原因是distinct只有用二重循环查询 ...