使用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>
最新文章
- Android Gson的使用总结
- hdu 1251 统计难题 (字典树入门题)
- html页面的head标签下
- [玲珑OJ1044] Quailty and Binary Operation (FFT+cdq分治)
- 第一部分 CLR基础:第1章 CLR的执行模型
- js数组的声明与应用
- ios Swift 备忘录
- 《Java程序员面试笔试宝典》终于在万众期待中出版啦~
- JavaScript+XML+VBA导出报表初步构想
- abstract修改方法
- hbase 无法操作与hadoop的安全模式的原因
- 微信小程序之上传下载交互api
- DOM相关知识
- if判断中的true和false
- vue数据绑定数组,改变元素时不更新view问题
- scrapy 手动编写模板
- Alpha冲刺7
- Python SMTP发送邮件
- 截图软件FastStone
- linux中的amount的解释
热门文章
- 关于ssh的几个功能
- Python中的模块引用机制
- PowerMock学习(八)之Mock Argument Matcher的使用
- 深入浅出14个Java并发容器
- 2019年最新阿里Java工程师面试题
- (三十八)c#Winform自定义控件-圆形进度条-HZHControls
- 移除 DevExpress 的 XtraForm 标题文字阴影
- Slickflow.NET 开源工作流引擎快速入门之二: 简单并行分支流程代码编写示例
- Python Web(三)
- 039.[转] 基于 Kubernetes 和 Spring Cloud 的微服务化实践