使用vue组件需要注意的4个细节
细节1：table（表格）中直接引用自定义组件出现的bug
如上图，tr本应在tbody中面，现在却是同级。造成的原因是h5规定table里必须有tbody，tbody中必须有tr，
当tbody中引入自定义组件，浏览器解析后就出现了上述问题
解决方法：依然在tbody中使用tr，同时使用vue的is属性，
该属性可理解为我想使用一个组件，但不能直接使用，虽然我这里写的是tr，但实际使用的是自定义组件，
同时建议ul中的li, select里的option都使用is属性，以防止上述问题的出现
DEMO
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div> <script>
Vue.component("row", {
template: "<tr><td>this is a row</td></tr>"
}) var vm = new Vue({
el: '#root'
})
</script>
</body> </html>
细节2：子组件里面的data必须是一个函数
下面写法data是一个对象，而不是函数，在vue根实例中（也就是父组件中）这种写法没有问题
若在子组件中，上述的写法会报错，提示data选项应该是一个函数，并且要返回一个对象
注：目的是为了让每个实例可以维护一份被返回对象的独立的拷贝
上面子组件data的写法用es6如下
细节3：使用vue提供的ref属性为元素或子组件注册引用信息，从而操作DOM
ref为元素注册引用操作dom
下面代码中this指向vue根实例，$refs指根实例下所有引用，hello是设置的元素引用名字， innerHTML是获取hello world文字信息
也可简单理解为ref属性帮我们获取到某个dom节点，ref = 'dom节点的名字，可以自定义'
DEMO
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="root">
<div ref="hello" @click="handleClick">hello world</div>
</div> <script>
var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
console.log(this.$refs.hello.innerHTML);
}
}
})
</script>
</body> </html>
ref为子组件注册引用操作dom（下面示例为点击后，计数求和）
DEMO
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="root">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>计数：{{total}}</div>
</div> <script>
Vue.component("counter", {
template: "<div @click='handleClick'>{{number}}</div>",
data: function() {
return {
number: 0
}
},
methods: {
handleClick: function() {
this.number++;
this.$emit("change");
}
}
}) var vm = new Vue({
el: '#root',
data: {
total: 0
},
methods: {
handleChange: function() {
this.total = this.$refs.one.number + this.$refs.two.number;
}
}
})
</script>
</body> </html>
细节4：子组件不能修改父组件传递过来的值
父组件通过属性的形势可以随意给子组件传递值，但子组件不能修改父组件的数据，
否则会有一个警告，提示不要直接修改父组件传递过来的值
注：因为vue有单项数据流机制，这个机制不会让子组件修改父组件的值
单项数据流是为了避免下面情况：
当子组件接收的不是一个基本类型（比如number，string, boolean），而是一个对象（引用类型）时，
在子组件中改变了父组件传递过来的值（比如下面示例代码中子组件接收的count值），可能这个值还被其它子组件所使用，这样其它子组件也会受影响
DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子组件间的数据传递-进阶</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<counter :count='1'></counter>
<counter :count='2'></counter>
</div> <script>
var counterTemplate = {
props: ['count'],
template: '<div @click="handleClick">{{count}}</div>',
methods: {
handleClick: function() {
this.count++
}
}
} var vm = new Vue({
el: '#root',
components: {
'counter': counterTemplate
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子组件间的数据传递-进阶</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<counter :count='1'></counter>
<counter :count='2'></counter>
</div> <script>
var counterTemplate = {
props: ['count'],
data: function() {
return {
number: this.count
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick: function() {
this.number++
}
}
} var vm = new Vue({
el: '#root',
components: {
'counter': counterTemplate
}
})
</script>
</body>
</html>
使用vue组件需要注意的4个细节的更多相关文章
- vue组件
分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- vue组件，撸第一个
实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
随机推荐
- 使用Eclipse开发Web项目（JSP）——简单登录、无sql
1.使用Eclipse开发Web项目(JSP) tomcat 2.在Eclipse中创建的Web项目: 浏览器可以直接访问webContent中的文件 例如http://localhost:8080/ ...
- [洛谷P1169][题解][ZJOI2007]午餐
这是题目吗? 显然的DP,讲几个重要的地方 1.贪心:让吃饭时间长的先排队(证明从略) 2.状态: f[i][j][k]代表前i个人,一号时间j,二号时间k显然MLE 所以压缩成f[i][j]代表前i ...
- 字典树(Trie)详解
详解字典树(Trie) 本篇随笔简单讲解一下信息学奥林匹克竞赛中的较为常用的数据结构--字典树.字典树也叫Trie树.前缀树.顾名思义,它是一种针对字符串进行维护的数据结构.并且,它的用途超级广泛.建 ...
- 围观高手是如何写好 Python 循环，把内存用到极致的？
0 前言 说到处理循环,我们习惯使用for, while等,比如依次打印每个列表中的字符: lis = ['I', 'love', 'python'] for i in lis: print( ...
- js之好看的鼠标点击-光标特效
1.光标特效 <script src="https://blog-static.cnblogs.com/files/axqa/bubbleCursor.js">< ...
- linux命令--查找与帮助
一.搜寻命令 1.whereis命令 whereis是搜索系统命令的命令,也就是说,whereis 命令不能搜索普通文件, 而只能搜索系统命令. 命令名称:whereis 英文原意:locate th ...
- Django多数据库
每个app使用不同的数据库 1. 配置数据库连接 # settings.py # DATABASES中必须要有default字段 DATABASES = { 'default': { 'ENGINE' ...
- 【CF908D】New Year and Arbitrary Arrangement
Problem Description 给定三个数 \(k,pa,pb\) ,每次有 \(\frac{pa}{pa+pb}\) 的概率往后面添加一个 a,有 \(\frac{pb}{pa+pb}\) ...
- CPU异常分析(以trap00为例)
Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html CPU异常的记录(trap00为例) 一.CPU检测到除零异常的执 ...
- Selenium(十九)：unittest单元测试框架(五) Page Object设计模式
1. Page Object设计模式 Page Object是Selenium自动化测试项目开发实践的最佳设计模式之一,它主要体现在对界面交互细节的封装,这样可以使测试方案更关注于业务而非界面细节.从 ...