组件之间的数据共享
组件之间的关系
- 父子关系
- 兄弟关系
父子组件之间的数据共享
- 父→子
- 子→父
父组件向子组件共享数据
父组件向子组件共享数据需要使用自定义属性。
eg.
//父组件
<Son :msg="message" :user="userinfo"></Son>
data(){
return {
message:'hello vue.js',
userinfo:{name:'zs',age:20}
}
}
//子组件
<template>
<div>
<h5>Son 组件</h5>
<p>父组件传递过来的msg值是:{{msg}}<p>
<p>父组件传递过来的user值是:{{user}}<p>
</div>
</template>
props:['msg','user']
父组件提供数据,子组件通过props接收
值类型是复制一份传过去
引用类型只是复制引用
不要直接修改props的值
子组件向父组件共享数据
子组件向父组件共享数据要使用自定义事件。
//子组件
export default{
data(){
return {count:0}
},
methods:{
add(){
this.count+=1
//修改数据时,通过$emit()触发自定义事件
this.$emit('numchange',this.count)
}
}
}
//父组件
<Son @numchange="getNewCount"></Son>
export default{
data(){
return {countFromSon:0}
}.
methods:{
getNewCount(val){this.countFromSon=val}
}
}
兄弟组件之间的数据共享
在Vue2.x中,兄弟组件之间数据共享的方案是EventBus
EventBus的使用步骤
- 创建eventBus.js模块,并向外共享一个Vue的实例对象
- 在数据发送方,调用bus.$emit(‘事件名称’,要发送的数据)方法触发自定义事件
- 在数据接收方,调用bus.$on(‘事件名称’,事件的处理函数)方法注册一个自定义事件