vue父子组件通信，兄弟组件通信

目录

一、父子组件通信

1、子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想)

a:子组件通过 props 获取父组件变量

b:父组件调用子组件中的方法

2、父组件通过ref获取子组件变量和子组件调用父组件的方法（这两个都是子传父的思想）

a:父组件通过ref获取子组件变量

b:子组件调用父组件的方法

3、总结

二、兄弟组件通信

1、通过 bus 进行兄弟组件通信

一、父子组件通信

1、子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想)

a:子组件通过 props 获取父组件变量

方法关键字：props 步骤(2步)：

1. 在父组件引用子组件标签中定义接受变量名并传值 。 公式：:子组件接受变量名=“父组件要传的变量名” 如 ：nowPriceF="nowPrice"

2. 在子组件data()方法平级定义props对象接收变量。 公式：props: { } 如：props: {nowPriceF: Number}

// 父组件
<Add :nowPriceF='nowPrice'></Add>

// 子组件
export default {props: {nowPriceF: Number},data() {}
}
​

b:父组件调用子组件中的方法

方法关键字：ref、$refs 步骤(3步)：

1. 在父组件引用子组件标签中定义ref，利用ref获取子组件变量。 公式：ref=“对子组件定义唯一ref值”,如 ：ref="addChild" 在父组件中直接调用子组件中的方法，可传参数。子组件获取父组件变量也可以用这个方法。

2. 公式：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步)：

1. 在父组件引用子组件标签中定义ref，利用ref获取子组件变量。 公式：ref=“对子组件定义唯一ref值” 如 ：ref="addChild"

2. 在父组件中直接获取子组件中的变量。 公式：this.$refs.addChild.子组件中变量名,如：this.$refs.addChild.addForm

//父组件
<Add ref="addChild" :nowPriceF='nowPrice'></Add>
//在所用的方法获取，addForm:子组件中变量名
this.$refs.addChild.addForm
​

b:子组件调用父组件的方法

方法关键字：$emit 步骤(2步)：

1. 在子组件中通过e m i t 调 用 父 组 件 中 定 义 的 方 法 ， 将 变 量 以 参 数 带 过 去 。 公 式 ： 在子组件中触发的函数里面写 t h i s . emit调用父组件中定义的方法，将变量以参数带过去。 公式：this.emit调用父组件中定义的方法，将变量以参数带过去。公式：在子组件中触发的函数里面写this.emit(‘传递到父组件的方法名’,需要传递的变量)”，如 ：this.$emit(‘lookPhotos’,file.url)

2. 在父组件引用子组件标签中获取子组件定义的方法并获得参数。 公式：@子组件定义传递到父组件的方法名="父组件获取参数变量的方法($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.jsimport 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>