VUE 父子组件、兄弟组件 之间通信 最强详解(vue父子组件加载顺序)

VUE 父子组件、兄弟组件 之间通信 最强详解

目录

1. 父组件 调用 子组件 内参数/方法

1.1 通过 ref 调用/获取 子组件内参数/方法

2. 子组件 调用 父组件 内参数/方法

2.1 通过 emit 调用 父组件方法

2.2 通过 props 调用 父组件方法/参数

2.3 通过 this.$parent 调用 父组件方法/参数

3. 兄弟组件 通信

3.1 通过 bus 进行 兄弟组件 通信

3.2 通过 父组件 让兄弟组件 进行通信

---

推荐整理分享VUE 父子组件、兄弟组件 之间通信 最强详解(vue父子组件加载顺序)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue父子组件间的参数传递是如何做到的,vue父子组件传值,vue父子组件的生命周期,vue父子组件传值,vue父子组件传值,vue父子组件通信,vue父子组件生命周期执行顺序,vue父子组件通信,内容如对您有帮助，希望把文章链接给更多的朋友！

简单 总结：

1.1 通过 ref 调用/获取 子组件内参数/方法

实现：就是在 你想要访问的组件上 通过 ref 注册引用信息，然后依靠 this.$refs 调用 组件内的方法以及参数。

2.1 通过 emit 调用 父组件方法

实现：将 要在子组件中 想调用的父组件方法，通过【@】配置至组件上，然后通过this.$emit()来调用。

2.2 通过 props 调用 父组件方法/参数

实现：将 要在子组件中 想调用的父组件方法/父组件参数，通过 【:】配置至组件上，接着在子组件的 props 内进行接收，然后直接通过 this.来调用就行。

2.3 通过 this.$parent 调用 父组件方法/参数

实现：呃，啥也不用弄，只要保持当前组件上面有个父组件就行，直接通过 this.$parent 调用就行。

3.1 通过 bus 进行 兄弟组件 通信

实现：通过 new Vue() 生成一个 bus 总线，然后在想要接收通信的组件内设置 bus.$on， 在想要发起通信的组件内使用 bus.$emit。

3.2 通过 父组件 让兄弟组件 进行通信

子组件1 传值 给父组件，父组件 传值 给子组件2

想了解 ref、$refs、$parent  请看我的另一篇文章：http://t.csdn.cn/66Fkt

1. 父组件 调用 子组件 内参数/方法1.1 通过 ref 调用/获取 子组件内参数/方法

步骤：

a 父组件 => 在 子组件元素上 设置 ref='名称'

b 父组件 => 然后通过 使用 this.$refs.名称.参数/方法 调用方法/参数

想了解 ref 请看我的另一篇文章：http://t.csdn.cn/66Fkt

先看截图，再看代码

<template> <div class="box"> <div>我是父组件</div> <div>{{ value }}</div> <button @click="handleFetchBaby1Param" class="button">获取 baby1 内参数</button> <button @click="handleFetchBaby1Function" class="button">调用 baby1 内方法</button> <!-- 通过 ref 在 baby1 组件身上 注册引用信息 --> <baby1 ref="baby1" class="border"></baby1> </div></template><script>import baby1 from '@/components/html/baby1.vue'export default { name: 'home', components:{ baby1 }, data(){ return{ value: "" } }, methods:{ // 获取 baby1 内参数 handleFetchBaby1Param(){ this.value = this.$refs.baby1.value; }, // 调用 baby1 内方法 handleFetchBaby1Function(){ this.$refs.baby1.handleBaby1Self() } }}</script><template> <div class="box"> <div>我是子组件1</div> <input v-model="value" style="width: 100%"> </div></template><script>export default { name: 'baby1', data(){ return{ value: null } }, methods: { // Baby1 组件 handleBaby1Self(){ this.value = this.value + 1; console.log('Baby1 组件 内方法被调用 =>', this.value) } }}</script>2. 子组件 调用 父组件 内参数/方法2.1 通过 emit 调用 父组件方法

步骤：

a 父组件 => 首先 在父组件内准备好 被 子组件调用的方法

b 父组件 => 将准备好的方法 需要通过@ 挂载至 组件元素上 （举例：<baby1 @childConsole='parentConsole'></baby1> ）

c 子组件 => 在子组件内 通过 this.$emit('方法名', 参数1,参数2...) 调用

先看截图，再看代码

<template> <div class="box"> <div>我是父组件</div> <div>{{ name }}</div> <!-- 通过 @ 将事件挂载 在组件上 --> <baby1 @childConsole='parentConsole'></baby1> </div></template><script>import baby1 from '@/components/html/baby1.vue'export default { name: 'home', components:{ baby1 }, data(){ return{ name: '', } }, methods:{ parentConsole(name){ this.name = name; console.log('父组件 的 方法被调用', this.name) } }}</script><template> <div class="box"> <div>我是子组件</div> <input v-model="value" style="width: 100%"> <button @click="handleFetchHomeFunction">调用 父组件 方法</button> </div></template><script>export default { name: 'baby1', data(){ return{ value: '' } }, methods: { // 调用 父组件方法 handleFetchHomeFunction(){ this.$emit('childConsole', this.value) } }}</script>2.2 通过 props 调用 父组件方法/参数

步骤：

a 父组件 => 首先 在父组件内准备好 被 子组件调用的方法/参数

b 父组件 => 将准备好的方法 需要通过: 将 方法/参数 挂载至 组件元素上 （举例：<baby1 :childConsole='parentConsole' :mail='mail'></baby1> ）

c 子组件 => 在 子组件 props 中 配置 接收来自父组件的方法/参数

d 子组件 => 在子组件内 通过 this.方法名(参数1,参数2...) 调用 / this.参数名 获取

先看截图，再看代码

<template> <div class="box"> <div>我是父组件</div> <div>{{ name }}</div> <!-- 通过 : 将 方法/参数 挂载 在组件上 --> <baby1 :childConsole='parentConsole' :mail='mail'></baby1> </div></template><script>import baby1 from '@/components/html/baby1.vue'export default { name: 'home', components:{ baby1 }, data(){ return{ name: '', mail: 'xxxx@qq.com' } }, methods:{ parentConsole(name){ this.name = name; console.log('父组件 的 方法被调用', this.name) } }}</script><template> <div class="box"> <div>我是子组件</div> {{ mail }} <input v-model="value" style="width: 100%"> <button @click="handleFetchHomeFunction">调用 父组件 方法</button> </div></template><script>export default { name: 'baby1', // 通过 配置 props 接收来自的方法/参数 props:{ // 接受 方法 childConsole:{ type: Function, require: true, default: null }, // 接受 参数 mail:{ type: String, require: true, default: null }, }, data(){ return{ value: '' } }, methods: { // 调用 父组件方法 handleFetchHomeFunction(){ this.childConsole(this.value) console.log('mail =>', this.mail) } }}</script>2.3 通过 this.$parent 调用 父组件方法/参数

步骤：

a 父组件 => 首先 在父组件内准备好 被 子组件调用的方法/参数

b 子组件 => 在子组件内 通过 this.$parent.父组件方法名(参数1,参数2...) 调用方法 / this.$parent.父组件内参数名 获取参数

想了解 $parent 请看我的另一篇文章：http://t.csdn.cn/66Fkt

先看截图，再看代码

<template> <div class="box"> <div>我是父组件</div> <div>{{ name }}</div> <baby1></baby1> </div></template><script>import baby1 from '@/components/html/baby1.vue'export default { name: 'home', components:{ baby1 }, data(){ return{ name: '', age: 18, } }, methods:{ parentConsole(name){ this.name = name; console.log('父组件 的 方法被调用', this.name) } }}</script><template> <div class="box"> <div>我是子组件</div> {{ age }} <input v-model="value" style="width: 100%"> <button @click="handleFetchHomeFunction">调用 父组件 方法</button> </div></template><script>export default { name: 'baby1', data(){ return{ value: '', age: null, } }, methods: { handleFetchHomeFunction(){ // 调用 父组件方法 this.$parent.parentConsole(this.value); // 获取 父组件参数 this.age = this.$parent.age; } }}</script>3. 兄弟组件 通信3.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><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><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>3.2 通过 父组件 让兄弟组件 进行通信

因为相比较 bus 不是很方便，兄弟通信尽量用 bus 就好，所以这里就不放代码了，直接说一下思路

子组件1 传值 给父组件，父组件 传值 给子组件2

博主清楚 文章排版的好坏，会导致 阅读者 能否更好的理解内容！

所以 如果你有 好的排版想法，可以私信给我呦！