目录
1、子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想)
2、父组件通过ref获取子组件变量和子组件调用父组件的方法（这两个都是子传父的思想）
一、父子组件通信
1、子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想)
a:子组件通过 props 获取父组件变量
方法关键字：props 步骤(2步)：
在父组件引用子组件标签中定义接受变量名并传值 。 公式：:子组件接受变量名=“父组件要传的变量名” 如 ：nowPriceF="nowPrice"
在子组件data()方法平级定义props对象接收变量。 公式：props: { } 如：props: {nowPriceF: Number}
// 父组件
<Add :nowPriceF='nowPrice'></Add>// 子组件
export default {
props: {
nowPriceF: Number
},
data() {}
}
b:父组件调用子组件中的方法
方法关键字：ref、$refs 步骤(3步)：
在父组件引用子组件标签中定义ref，利用ref获取子组件变量。 公式：ref=“对子组件定义唯一ref值”,如 ：ref="addChild" 在父组件中直接调用子组件中的方法，可传参数。子组件获取父组件变量也可以用这个方法。
公式：this.r e f s . a d d C h i l d . 子 组 件 中 方 法 名 ∗ ∗ 如 ： ∗ ∗ t h is . refs.addChild.子组件中方法名** 如：**this.refs.addChild.子组件中方法名∗∗如：∗∗this.refs.addChild.calculateWithdrawal(row) 在子组件中执行调用的方法，可获取参数。 公式：定义普通方法一样,如：calculateWithdrawal(row){ }
/父组件
<Add ref="addChild" :nowPriceF='nowPrice'></Add>
//在所用的方法获取，addForm:子组件中变量名
this.$refs.addChild.calculateWithdrawal(row)calculateWithdrawal(row){
console.log('父组件中调用了这个方法并传递了参数'，row)
}
2、父组件通过ref获取子组件变量和子组件调用父组件的方法（这两个都是子传父的思想）
a:父组件通过ref获取子组件变量
方法关键字：ref 、$refs 步骤(2步)：
在父组件引用子组件标签中定义ref，利用ref获取子组件变量。 公式：ref=“对子组件定义唯一ref值” 如 ：ref="addChild"
在父组件中直接获取子组件中的变量。 公式：this.$refs.addChild.子组件中变量名,如：this.$refs.addChild.addForm
//父组件
<Add ref="addChild" :nowPriceF='nowPrice'></Add>
//在所用的方法获取，addForm:子组件中变量名
this.$refs.addChild.addForm
b:子组件调用父组件的方法
方法关键字：$emit 步骤(2步)：
在子组件中通过e m i t 调 用 父 组 件 中 定 义 的 方 法 ， 将 变 量 以 参 数 带 过 去 。 公 式 ： 在子组件中触发的函数里面写 t h i s . emit调用父组件中定义的方法，将变量以参数带过去。 公式：
this.emit调用父组件中定义的方法，将变量以参数带过去。公式：在子组件中触发的函数里面写this.emit(‘传递到父组件的方法名’,需要传递的变量)”，如 ：this.$emit(‘lookPhotos’,file.url)在父组件引用子组件标签中获取子组件定义的方法并获得参数。 公式：@子组件定义传递到父组件的方法名="父组件获取参数变量的方法($event)",如：@lookPhotos="lookPhotosUrl($event)"
//子组件
handlePictureCardPreview(file) {
this.$emit('lookPhotos',file.url)
//lookPhotos 定义传递到父元素的方法名
//file.url 父元素要获取的东西
},
//父组件
<Add ref="addChild" @lookPhotos="lookPhotosUrl($event)" :nowPriceF='nowPrice'></Add>
//在methods: {}中获取
lookPhotosUrl(url){
console.log('父元素需要的东西'，url)
},
3、总结
a:父组件通过ref调用/获取子组件内参数/方法
b:子组件通过emit调用父组件方法
c:子组件通过prop获取父组件变量
二、兄弟组件通信
1、通过 bus 进行兄弟组件通信
步骤：
a 在 main.js 文件内 将 new Vue() 挂载至 vue 原型上
b 在 接受 通信的组件内 使用 this.$bus.$on() 进行初始化
c 在 发起通信 组件内 使用 this.$bus.$emit('方法名', 参数1, 参数2...)
// mian.js
import Vue from 'vue'
import App from './App'
import router from './router'
//重要
Vue.prototype.$bus = new Vue(); // 设置 挂载至 vue 的原型上
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})父组件
<template>
<div class="box">
<div>我是父组件</div>
<div style="display: flex">
<!-- 子组件 1 （-_- 我和 子组件2 是同级关系 所以是兄弟组件 -_- ）-->
<baby1 class="border"></baby1>
<!-- 子组件 2 （-_- 我和 子组件1 是同级关系 所以是兄弟组件 -_- ）-->
<baby2 class="border"></baby2>
</div>
</div>
</template>
<script>
import baby1 from '@/components/html/baby1.vue'
import baby2 from '@/components/html/baby2.vue'
export default {
name: 'home',
components:{
baby1,
baby2
}
}
</script>子组件1
<template>
<div class="box">
<div>我是子组件1</div>
<input v-model="value" style="width: 100%">
<button @click="handleFetchHomeFunction">将值 更新至 子组件2</button>
</div>
</template>
<script>
export default {
name: 'baby1',
data(){
return{
value: ''
}
},
methods: {
// 调用 兄弟组件 方法
handleFetchHomeFunction(){
this.$bus.$emit('valueUpdate', this.value)
}
}
}
</script>子组件2
<template>
<div class="box">
<div>我是子组件2</div>
<input v-model="value" style="width: 100%">
</div>
</template>
<script>
export default {
name: 'baby1',
data(){
return{
value: ''
}
},
mounted(){
// 接收事件
this.$bus.$on('valueUpdate', (value)=>{
this.value = value;
})
},
}
</script>