共计 2050 个字符，预计需要花费 6 分钟才能阅读完成。
一、父组件 =》子组件传递数据
1、子组件在 props 中创建一个属性，用以接收父组件传过来的值 2、父组件中注册子组件 3、在子组件标签中添加子组件 props 中创建的属性 4、把需要传给子组件的值赋给该属性
二、子组件 =》父组件传递数据
* 当子组件需要向父组件传递数据时，就要用到自定义事件。1、子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件 2、将需要传的值作为 $emit 的第二个参数，该值将作为实参传给响应自定义事件的方法 3、在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
三、非父子组件传递数据
1、新建一个 eventBus.js 文件，在里面新建一个 vue 实例，这个实例就承担起了组件之间通信的桥梁了，也就是中央事件总线 2、然后给每个子组件绑定一个方法 (触发时候发布 eventBus), 在每个子组件做一个订阅的监控, 触发绑在 created 里的方法执行
在通信中，组件之间传值，他们都有一个共同点就是有中间介质，* 子向父的介质是自定义事件 * 父向子的介质是 props 中的属性 * 非父子组件的介质是中央事件总线 抓准这三点对于组件之间通信就好理解了
vue-cli 创建的项目，附上精简的代码与图片：
HelloWorld.vue
<template>
<div class=”hello”>
<h1>hello 标题 </h1>
<!– // 在子组件标签 child-aa 上绑定 myEvent 对自定义事件的监听 –>
<child-aa :myProp=”toChildA” @myEvent=”touchMe”></child-aa>
<div> 孩子，你贵姓：{{getByChildA}}</div>
<child-bcd :myProp=”toChildA” @myEvent=”touchMe”></child-bcd>
</div>
</template>
<script>
import childAa from ‘./childA’
import childBcd from ‘./childBcd’
export default {
name: ‘HelloWorld’,
data () {
return {
toChildA: ‘ 给子组件 childA 传字符串内容 ’, // 把需要传给子组件的值赋给该属性
getByChildA: ”
}
},
components: {
childAa, // 父组件中注册子组件
childBcd
},
methods: {
touchMe(obj) {
this.getByChildA = obj.age
}
}
}
</script>
childA.vue
<template>
<div class=”childA”>
<h3> 这里是 childA</h3>
<div>
{{myProp}}
</div>
<button @click=”doSomething”>
给父组件传个信息
</button>
<h3> 兄弟组件传什么过来了：{{brotherInfo}}</h3>
</div>
</template>
<script>
import $bus from ‘../untils/eventBus’
export default {
name: ‘childA’,
data () {
return {
brotherInfo: ”
}
},
props: {
myProp: {
type: String // 子组件在 props 中创建一个属性，用以接收父组件传过来的值
}
},
methods: {
doSomething() { // 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
this.$emit(‘myEvent’, {age: ‘lihongwei’}) // 将需要传的值作为 $emit 的第二个参数，该值将作为实参传给响应自定义事件的方法
}
},
created() {
$bus.$on(‘myEvent’,(brotherInfo) => {
this.brotherInfo = brotherInfo
})
}
}
</script>
<style scoped>
.childA{
padding: 30px;
border: 5px solid #ddd;
}
</style>
childBcd.vue
<template>
<div class=”childBcd”>
<h3> 这里是 childBcd</h3>
<button @click=”toBrother”>
给 chidA 传个信息
</button>
</div>
</template>
<script>
import $bus from ‘../untils/eventBus’
export default {
name: ‘childBcd’,
data () {
return {
}
},
methods: {
toBrother() {
$bus.$emit(‘myEvent’, ‘ 兄弟, 你好 ’)
}
}
}
</script>
<style scoped>
.childBcd{
padding: 30px;
border: 5px solid #ddd;
}
</style>
eventBus.js
import Vue from ‘vue’
export default new Vue()
