父子组件之间的通信
1. 父组件给子组件传递数据-props
- 核心：通过props，给子组件添加自定义属性
<template id="parent">
<div>
<h2>parent</h2>
<children :msg="msg"></children>
</div>
</template>
<javascript>
components:{
parent:{
template:'#parent',
data(){
return {
msg:'我是父组件的数据'
}
},
components:{
children:{
template:'<h3>children {{msg}}</h3>'
//props:{msg} 子组件校验父组件传过来的数据，必须为字符串类型
props:{msg:String},//props:['msg'] 可以用数组和对象来接受数据，子组件只接收父组件传来的数据，不校验
}
}
}
}
</javascript>
2.子组件给组件传递数据- events
- 核心：添加自定义事件，通过this.$emit给父组件发射自己的数据
<template id="parent">
<div>
<h2>parent{{}}</h2>
<children @msg="getMsg"></children>
</div>
</template>
<javascript>
components:{
parent:{
template:'#parent',
methods:{
getMsg(data){
this.msg=data
}
},
components:{
children:{
template:'<h3>children {{msg}}</h3>',
data(){
return{msg:'我是子组件的数据'}
},
mounted(){
this.$emit('msg',this.msg) //子组件发射一个事件给父组件，把自己的数据告诉父组件
}
}
}
}
}
</javascript>
注意：$emit(str1,[str2])，str1:自定义事件名，str2:要传入的参数，可以是多个。
3.子组件更改父组件数据，数据同步
- 核心：父组件在给子组件传递数据的时候，传递一个对象，利用对象是对地址的引用来进行更改
data(){
return {
msg:{name:'hello world!'}
}
}
4.子组件更改父组件数据，但是不同步
- 核心：在组件加载进来时，新创建变量，值引用的是父亲传过来的值；我们更改的只是这个新变量的值；
注意：在自定义组件中，data都是函数，利用返回值来返回数据的
components:{
children:{
template:'<h3 @click="change">children {{bb}}</h3>',
//props:{aa:String} 子组件校验父组件传过来的数据，必须为字符串类型
props:{aa:String},//props:['aa'] 子组件只接收父组件传来的数据，不校验
data(){
return{
bb:this.aa
}
},
mounted(){
this.bb=this.aa
},
methods:{
change(){
this.bb='hello world!';
}
}
}
}
}
非父子组件数据传递
- 核心：通过Event.$emit发射数据，通过Event.$on接收数据。
var Event=new Vue;//事件； Event.$on Event.$emit
var app=new Vue({
el:'#app',
components:{
hello1:{
template:'#t1',
methods:{
send(){//发射事件
Event.$emit('myEvent','我是数据1111')
}
}
},
hello2:{
template:'#t2',
data(){
return {msg:""}
},
mounted(){//提前绑定好的事件
Event.$on('myEvent',(a)=>{
this.msg=a;
})
}
}
}
})
