组件之间的关系
1. 父子关系
1.1 父传子——使用自定义属性
- props里的值都不建议去修改
//父组件
<son :msg="message" :user="userinfo"></son>
data(){
return{
message:'hello',
userinfo:{
name:'张三',
age:20
}
}
}
//子组件
<template>
<div>
<h1>son组件</h1>
<p>父组件传递过来的msg值:{{msg}}</p>
<p>父组件传递过来的user值:{{user}}</p>
</div>
</template>
//自定义属性
props:['msg','user']
1.2 子传父——使用自定义事件
子组件
data(){
return{
//子组件的数据,将来希望把count值传给父组件
count:0;
}
},
methods:{
add(){
this.count += 1
//修改数据时,通过$emit()触发自定义事件
//自定义事件名字,要传的值
this.$emit('numchange',this.count)
}
}
//父组件
<son @numchange="getNewCount"></son>
data(){
return{
//定义counyFromSon数据项来接收子组件传递过来的数据
countFromSon:0
}
},
methods:{
//获取子组件传递过来的数据
getNewCount(val){
this.countFromSon = val
}
}
2. 兄弟关系
- 在vue2.x中,兄弟组件之间数据共享的方案时EventBus
//兄弟组件A--发送方
import bus from './eventBus.js'
export default{
data(){
return{
msg:'hello vue'
}
},
methods:{
sentMsg(){
bus.$emit('share',this.msg)
}
}
}
//eventBus.js
import Vue from 'vue'
//向外共享Vue的实例对象
export default new Vue()
//兄弟组件C--接收方
import bus from './evenBus.js'
export default{
data(){
return{
//从A处接收到的值
msgFromA:''
}
},
created(){
//为bus绑定事件
//share事件被触发,A里的msg会被传到C里的val
bus.$on('share',val => {
this.msgFromA = val
})
}
}
EventBus的使用步骤
- 3.1 创建eventBus.js模块,并向外共享一个Vue的实例对象
- 3.2 在数据发送方,调用bus.$emit('事件名称',要发送的数据)方法触发自定义的事件
- 3.3 在数据接收方,调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件