前言
在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件，并学会了如何定义局部组件和全局组件，上一篇内容仅仅只是对组件一个简单的入门，并没有深入的了解组件当中的其它机制，本篇博客将会带大家深入了解组件的其它知识，组件的校验，组件的通信等等。
本章目标
- 学会组件简单的校验
- 学会父组件向子组件传递数据
- 学会子组件向父组件传递数据
父组件向子组件传递数据
父组件向子组件传递数据实现的方式特别简单，只用使用props进行数据传递就可以了。
语法：props['属性1'，‘属性2’，...]
我找了一张图给大家参考一下
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息
(1)简单的父组件向子组件传递信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父组件向子组件传递信息</title>
</head>
<body>
<div id="app">
<my-content :title='title' :content='content'></my-content>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
title:'标题',
content:'内容'
},
methods:{ },
computed:{ },
components:{
'myContent':{
props:['title','content'],
template:`<div>
<h1>{{title}}</h1>
<p>{{content}}</p>
</div>`
}
} }) </script>
</body>
</html>
结果：显示标题和内容，最简单的父组件向子组件传递信息我们就实现了，但是里面还有其它的小知识点我们没有讲解到，而且后期开发都是使用vue-cli来实现父组件向子组件传递数据的，所以这个知识点下一篇博客会讲解到，不会搭建vue-cli项目的朋友可以参考这篇博客使用webstorm搭建vue-cli项目后续的许多文章都会使用vue-cli中的组件进行讲解，而不是通过简单的引入vue.js文件了，所以强烈推荐大家一定要学会搭建vue-cli项目。
总结：父组件向子组件传递数据使用props
(2)props传递整个对象
假设父组件中的对象含有多个属性，我们每一个属性都需要进行传递，那么是不是需要绑定每一个属性呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>props传递多个属性</title>
</head>
<body>
<div id="app">
<my-content :title="attr.title" :content1="attr.content1" :content2="attr.content2"></my-content>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
attr:{
title:'新闻主题',
content1:'新闻内容1',
content2:'新闻内容2',
}
},
methods:{ },
computed:{ },
components:{
'myContent':{
props:['title','content1','content2'],
template:'<div><h4>{{title}}</h4><span>{{content1}}</span><span>{{content2}}</span></div>'
}
} }) </script>
</body>
</html>
现在这个实例所表现出来的就是一个对象里面有很多个属性，现在仅仅只有三个属性而已，我们的父组件绑定属性的时候就需要绑定三个属性，如果是100个或者1000个那么绑定组件的那个标签不是很长吗？和同事一起开发的话，你的同事看到那么长的代码肯定会怀疑人生的，所以为了解决这个问题我们将代码改写下面那样。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>props传递多个属性</title>
</head>
<body>
<div id="app">
<my-content v-bind="attr"></my-content>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
attr:{
title:'新闻主题',
content1:'新闻内容1',
content2:'新闻内容2',
}
},
methods:{ },
computed:{ },
components:{
'myContent':{
props:['title','content1','content2'],
template:'<div><h4>{{title}}</h4><span>{{content1}}</span><span>{{content2}}</span></div>'
}
} }) </script>
</body>
</html>
在这里我们使用v-bind将整个对象打包传递过去，这样一来就大大的减少了代码的冗余度了，那么你的同事肯定夸你小伙子不错,你就等着被领导表扬吧！(自己脑补出来的)
data必须是函数
为什么说data必须是一个函数呢？这个知识点在上一篇博客中没有提及到，现在的话我们来讨论一下，这个案例就足够说明了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>data必须是函数</title>
</head>
<body>
<div id="app">
<my-content></my-content>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('myContent',{
data:{
msg:'hello world'
},
template:'<span>{{msg}}</span>',
});
let vm=new Vue({
el:'#app'
})
</script>
</body>
</html>
结果：
控制台显示vue.js给出的警告也是提出data必须是一个函数，好的既然规定data必须是一个函数，那我们就按照它说的来做。看看结果如何
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>data必须是函数</title>
</head>
<body>
<div id="app">
<my-content></my-content>
<my-content></my-content>
<my-content></my-content>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var data={
count:1
}
Vue.component('myContent',{
data:function(){
return data;
},
template:'<button @click="count+=1">{{count}}</button>',
});
let vm=new Vue({
el:'#app'
})
</script>
</body>
</html>
现在的话，我们的data是一个函数，但是解决一个问题的同时新的问题又出现了，点击任意一个按钮的时候发现其它按钮的值都会发生改变，这是因为我们引用了同一个对象，我们知道对象是引用传递的，所以为了改变这一种情况，我们让每个组件内部都有自己的状态而不会去干涉其它组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>data必须是函数</title>
</head>
<body>
<div id="app">
<my-content></my-content>
<my-content></my-content>
<my-content></my-content>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('myContent',{
data(){
return{
count:1
}
},
template:'<button @click="count+=1">{{count}}</button>',
});
let vm=new Vue({
el:'#app'
})
</script>
</body>
</html>
结果：
我们在data中使用return返回新的对象，这样一来每一个组件都有自己本身的状态了，从而不会去影响其它的组件。
组件的校验
组件的校验从字面上看就是对父组件向子组件传递的信息中，子组件对父组件传递过来的信息进行验证，一方面是为了数据的安全性，另一方面给他人使用的时候也可以限制他人传递过来的数据的验证。
Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
type可选：
- Sting
- Number
- Boolean
- Function
- Object
- Array
(1)示例一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件的校验示例一</title>
</head>
<body>
<div id="app">
<my-content :name="name" :age="age" :sex="sex"></my-content>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
name:'小明',
age:18,
sex:'男'
},
methods:{ },
computed:{ },
components:{
'myContent':{
props:{
name:{
type:Number,
required:true,
},
age:{
type:Number,
default:20,
},
sex:{
type:String,
default:'女'
}
},
template:'<div><span>{{name}}</span><span>{{age}}</span><span>{{sex}}</span></div>'
}
} }) </script>
</body>
</html>
结果：
我们对name做了验证规定，name的类型必须是Number,而传递过来的却是String,所以vue.js给出了警告，对name属性也要求是必须传递的参数，required：true,对sex给定默认值，当我们没有传递sex的时候，子组件中的sex默认值是女的，所以有了组件的这一校验，大大提高的数据的安全性。
(2)示例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件的校验示例二</title>
</head>
<body>
<div id="app">
<my-content name="喜马拉雅" :size="8848" :is-boy="false" address="中国*"></my-content>
</div>
<script type="text/template" id="template1">
<div>姓名:{{name}}身高:{{size}}是否是男生:{{isBoy}}位置:{{address}}重量:{{weight.ton}}亿吨</div>
</script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('myContent',{
template:'#template1',
props:{
name:{
type:String, //类型
required:true, //规定必填
},
size:Number, //规定整形
isBoy:Boolean, //规定布尔值
age:[Number,String],// 多种类型
address:{
type:String,
default:'中国',
validator:function(value){
return value.indexOf('中国')>=0
}
},
weight:{
type:Object,
default:function(){
return {ton:999999999}
}
},
} })
let vm=new Vue({
el:'#app',
data:{ },
methods:{ },
computed:{ } }) </script>
</body>
</html>
结果：
子组件向父组件传递数据
我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName)触发事件
接下来我们一步一步对子组件向父组件传递数据进行讲解，先来看下一个特别简单的示例，这个需求是这样的，当我们改变子组件的count的时候，父组件的count也需要改变
(1)子组件实现功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子组件向父组件传递数据</title>
</head>
<body>
<div id="app">
<my-content :count="count"></my-content>
父组件的count:<span>{{count}}</span>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
count:1
},
methods:{ },
computed:{ },
components:{
'myContent':{
data(){
return{
ownCount:this.count
}
},
props:['count'],
template:'<div>子组件的count:<span>{{ownCount}}</span><button @click="handleClick">add</button></div>',
methods:{
handleClick(){
this.ownCount++;
}
}
}
} }) </script>
</body>
</html>
我们通过父组件向子组件传递了count值，然后子组件中的count值在点击之后会发生改变，但是这仅仅实现了子组件的值改变，并没有实现父组件中的count改变
(2)向父组件传递信息
需要向父组件传递信息的话，我们就需要子组件通知父组件，然后父组件在做相应的处理，而需要通知父组件我们就i需要用到this.$emit('事件名称',值)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子组件向父组件传递数据</title>
</head>
<body>
<div id="app">
<my-content :count="count" @add="handleAdd"></my-content>
父组件的count:<span>{{count}}</span>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
count:1
},
methods:{
handleAdd(count){
this.count=count;
}
},
computed:{ },
components:{
'myContent':{
data(){
return{
ownCount:this.count
}
},
props:['count'],
template:'<div>子组件的count:<span>{{ownCount}}</span><button @click="handleClick">add</button></div>',
methods:{
handleClick(){
this.ownCount+=10;
this.$emit('add',this.ownCount);
}
}
}
} }) </script>
</body>
</html>
结果：
我们在子组件点击按钮的时候添加了this.$emit()来通知父组件，然后将需要注册的事件和每次改变的值传递了过去，这时父组件注册子组件传递过来的事件和值，然后将父组件中的值替换子组件传递过来的就可以了。
(3)优化子组件向父组件传递信息
其实我们可以做到让父组件来控制子组件中count值的变化，假设我们每次让子组件增加10，我们先来一个小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子组件向父组件传递数据</title>
</head>
<body>
<div id="app">
<my-content :count="count" @add="handleAdd" v-bind="info"></my-content>
父组件的count:<span>{{count}}</span>
<button @click="handleClick">点击</button>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
count:1,
info:{
name:'男',
age:18
}
},
methods:{
handleAdd(count){
this.count=count;
},
handleClick(){
this.info.name='女'
}
},
computed:{ },
components:{
'myContent':{
data(){
return{
ownCount:this.count
}
},
props:['count','name','age'],
template:'<div><span>姓名:{{name}}</span><br/>子组件的count:<span>{{ownCount}}</span><button @click="handleClick">add</button></div>',
methods:{
handleClick(){
this.ownCount+=10;
this.$emit('add',this.ownCount);
}
}
}
} }) </script>
</body>
</html>
结果：
当我们点击按钮的时候发现父组件传递给子组件的姓名发生了改变，那么我们只要改变父组件中的count的值，那么子组件中count的值也会发生改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子组件向父组件传递数据</title>
</head>
<body>
<div id="app">
<my-content :count="count" @add="hanldeAdd"></my-content>
父组件中的count<span>{{count}}</span>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
count:1
},
methods:{
hanldeAdd(count){
this.count+=count;
}
},
computed:{ },
components:{
'myContent':{
data(){
return{
//ownCount=this.count;
}
},
props:['count'],
template:'<div>子组件中的count<span>{{count}}</span><button @click="handleClick">add</button></div>',
methods:{
handleClick(){
this.$emit('add',10)
}
}
}
} }) </script>
</body>
</html>
这样一来父子组件的简单通信就全部讲完了，接下来为了巩固一下父子组件之前通信的知识，我们来做一个任务清单
总结：子组件向父组件传递信息this.$emit('事件名称'，值)
(4)任务清单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>任务清单</title>
</head>
<body>
<div id="app">
任务：<input type="text" v-model="newTask" @keyup.enter="addNew" placeholder="请输入您要完成的任务" />
<ul>
<li is="todoImte" v-for="(item,index) of tasks" :title="item" @remove="removeItem(index)"></li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('todoImte',{
props:['title'],
template:"<li>{{title}}<button @click='$emit(\"remove\")'>X</button></li>"
});
let vm=new Vue({
el:'#app',
data:{
newTask:'',
tasks:['买一本书','写一次博客','和朋友一起吃饭']
},
methods:{
addNew(){
this.tasks.unshift(this.newTask);
this.newTask='';
},
removeItem(index){
if(confirm('确定要删除吗?')){
this.tasks.splice(index);
}
}
},
computed:{ } }) </script>
</body>
</html>
结果：
任务清单中，首先有个添加任务的框，然后通过addNew方法将任务添加到任务清单中，子组件中通过this.$emit()告诉父组件执行相应的方法，任务清单中，我们可以添加任务清单也可以删除任务清单，添加任务清单的话，没有涉及组件通信，二删除任务清单的时候，子组件通知父组件需要删除那个任务，然后将需要删除任务的索引传递过去，父组件根据传递过来的index进行删除。
总结
本篇博客主要讲了三个知识点，组件的校验，父组件向子组件传递信息(通过props)，子组件向父组件传递信息(通过this.$emit),本篇博客讲解的内容也比较简单，但是我认为这仅仅也还是组件的开始，下一遍博客我们将会讲解vue-cli中的组件通信，毕竟这个才是重点，现在的组件通信也才是入门。欢迎大家在博客下方评论，我们一起交流。