Vue组件的三种常用的传值方式在日常工作中是用的非常多的，非常重要！
在进行下面的介绍之前，首先要搞清楚什么是父组件，子组件和兄弟组件，下面是他们的介绍
- 父组件向子组件传值
父组件向子组件共享传递数据需要使用自定义属性，示例代码如下：
//父组件里面的主要内容
//使用子组件，自定义属性名称将父组件的两个数据暴露给子组件，例如//我这使用了msg和user,然后子组件中同样使用msg与user接收数据，
//同样注意是通过数据绑定的方式传递
<Child :msg="message" :user="suerinfo"></Child>
//下面这一行是引入子组件,子组件的定义名称为Child，之后记得注册
import Child from './路径名/child.vue'
data(){
return{
message:'hello vue.js'
userinfo:{ name:'hh',age:20}
}
}
//子组件里面的内容
<template>
<view>
<p>父组件传递过来的msg值:{{msg}}</p>
<p>父组件传递过来的user值:{{user}}</p>
</view>
</template>
//通过自定义属性接收父组件传过来的参数,这里的属性名称一定要与父组件保持一致（msg,user）,注意不要更改props里面的属性值，因为里面的属性是只读的，同时修改之后这样也会导致父子组件的值不同。
props:['msg','user']
最后简单总结就是：父组件绑定自定义属性，传值；子组件在props里面声明。
2. 子组件向父组件传值
子组件向父组件共享传递数据使用自定义事件。示例代码如下：
//子组件(child.vue)中的内容
export default {
data() {
return { child_data_:0}
},
methods: {
add() {
this.child_data+=2
//第一步
//子组件修改数据时，通过$emit()触发自定义事件
//这里填写监听事件与想要传递给父组件的数据
this.$emit('dataChange',this.child_data)
}
}
}
//父组件中的内容
//第二步
//其实就等于事件监听，监听子组件中的child_data的数据变化)
<Child @datachange = "change"></Child>
export default {
data() {
return { fahter_data :0}
},
methods: {
//第三步
change(val){
//这里的val其实就是子组件传递过来的child_data
//下面这句代码说白了就是起到一个转存的作用
this.father_data = val
}
}
}
3.兄弟组件之间的数据传值
在vue2.x的版本中，兄弟组件之间的数据共享使用的是EventBus
基本步骤：
- 建立eventBus.js模块，并向外共享一个Vue的实例对象
- 在发送方组件中调用EventBus.$emit（‘事件名称’，要发送的数据）来触发自定义事件
- 在接收方组件，调用EventBus.$on(‘事件名称’，事件处理函数)
来注册一个自定义事件
下面是示例代码：
//兄弟组件（数据发送方）
import eventBus from './eventBus.js'
export default {
data() {
return {
data:'hello'
}
},
methods: {
snedData(){
eventBus.$emit('share',this.data)
}
}
}
//eventBus.js
import Vue from 'vue'
//向外共享Vue的实例对象
export default new vue()
//兄弟组件（数据接收方）
import eventBus from './eventBus.js'
export default {
data(){
return {
receive_data:' '
}
},
created(){
eventBus.$on('share',val =>{
this.receive_data = val
})
}
}
最后简单总结三种传值关系就是：
父向子传数据使用自定义属性
子向父传数据使用自定义事件
兄弟组件之间传送数据使用EventBus
