使用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元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
随机推荐
- robotframework框架 - 利用RequestsLibrary关键字轻松实现接口自动化！
robotframework(后续简称为robot)是一款自动化测试框架,可能做各种类型的自动化测试. 本文介绍通过robotframework来做接口测试. 第一步:安装第三方库,提供接口测试的关键 ...
- 推荐系统| ② 离线推荐&基于隐语义模型的协同过滤推荐
一.离线推荐服务 离线推荐服务是综合用户所有的历史数据,利用设定的离线统计算法和离线推荐算法周期性的进行结果统计与保存,计算的结果在一定时间周期内是固定不变的,变更的频率取决于算法调度的频率. 离线推 ...
- 集合系列 Set（八）：TreeSet
TreeSet 是 Set 集合的红黑树实现,但其内部并没有具体的逻辑,而是直接使用 TreeMap 对象实现.我们先来看看 TreeSet 的定义. public class TreeSet< ...
- 跨域问题，解决方案-Nginx反向代理
跨域问题,解决之道 跨域问题,在日常开发过程中,是一个非常熟悉的名词.今天的话题,结合我之前的项目场景,讨论下<跨域问题,解决之道>. 跨域是什么 跨域问题,是由于JavaScript出于 ...
- Electron桌面项目-解决throw new Error('Electron failed to install correctly, please delete node_modules..
前言 Electron 是一个用 HTML,CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库.由GitHub开发的. 其原理是 Electron 通过将 Chromium 和 N ...
- 多线程六 同步容器&并发容器
同步容器(使用的是synchronized,并且不一定是百分百安全) 本篇续 -- 线程之间的通信 ,介绍java提供的并发集合,既然正确的使用wait和notify比较困难,java平台为我们提供了 ...
- [问题排查]通过调度系统远程执行脚本，报mysql command not found异常
今天在公司使用LS调度系统(百度内部的工具),执行远程脚本的时候,每次都失败. 脚本内容比较简单,其实就是将HDFS(AFS)中的数据插入到Palo(Doris)数据库中,脚本如下: mysql -h ...
- 利用重写R3环的ReadProcessMemory来防止恶意程序钩取
访问这里---> Windows系统调用中API的三环部分(依据分析重写ReadProcessMemory函数)
- RabbitMQ与Spring的框架整合之Spring AMQP实战
1.SpringAMQP用户管理组件RabbitAdmin. RabbitAdmin类可以很好的操作RabbitMQ,在Spring中直接进行注入即可.注意,autoStartup必须设置为true, ...
- javaWeb技术第二篇之CSS、事件和案例
<!--内联式 CSS (层叠样式表) 编辑 层叠样式表(英文全称:Cascading Style Sheets) CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式 ...