使用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元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
随机推荐
- python(一) jupyter 安裝
copy from https://jupyter.org/install Getting started with JupyterLab Installation JupyterLab can be ...
- 外部调用Tomcat启动脚本后日志中文显示乱码问题的解决
外部sh脚本如下 #!/bin/bash while read LINE do echo "Hello $LINE!" case $LINE in all) tail -f -n2 ...
- table+分页+模糊查询
这个分页超级棒嘞. 网页链接:http://www.cssmoban.com/cssthemes/7528.shtml
- java之JavaBean
JavaBean是一种java语言编写而成的可重用组件. 所谓JavaBean,是指符合以下标准的java类: 类是公共的: 有一个无参的公共构造器: 有属性,属性一般是私有的,且有对应的set.ge ...
- 【RTOS】为H7配套的uCOS-III模板也是可以用于MDK AC6的，提供个模板
AC6模板 链接:https://pan.baidu.com/s/1_4z_Lg51jMT87RrRM6Qs3g 提取码:2gns 原始的这个模板直接修改为AC6: 编译有几十处警告,修改下面三个 ...
- JS-正则表达式解析
正则表达式通常用于输入校验,用法示例为 if (!(/^1[345789]\d{9}$/.test($('.tel').val()))) { $.toast("手机号格式有误", ...
- Cypress 之 URL访问
visit 作用: 访问一个远程URL. (建议:使用前设置 baseUrl) 语法: cy.visit(url) cy.visit(url, options) cy.visit(options) 使 ...
- 利用重写R3环的ReadProcessMemory来防止恶意程序钩取
访问这里---> Windows系统调用中API的三环部分(依据分析重写ReadProcessMemory函数)
- golang-错误处理
1.错误处理 如果要写出健壮 ,易维护的代码 ,错误处理就是关键 ,考虑到可能会发生的意外对其进行处理 go的错误处理与众不同 ,在调用可能出现问题的方法和函数时都会返回一个类型为error的值 ,由 ...
- .netcore2.1 JS-SDK 从后台获取微信签名，实现自定义分享标题、描述、图片
最近项目移动端需要实现微信自定义分享功能,包含分享自定义标题.描述等. 首先到公众号的后台,功能设置里面,添加将要被分享的域名,如图 后端签名算法实现 ,参考腾讯开发者文档https://mp.wei ...