兄弟组件传值

兄弟组件之间彼此没有联系，它们需要通过中间Vue实例对象bus(快递员)进行数据传递。

1. 声明事件

给组件实例(或Vue实例) 声明事件有两种方式：

直接声明
通过$on实现

给组件实例声明事件：

<组件 @事件名称="事件驱动方法"></组件>

通过$on进行声明：

// 语法：
组件实例.$on(事件名称，事件驱动方法(形参，形参){})
// 例如：
// 声明事件
vm.$on('hello',function(traffic,city){console.log(`我坐着{$traffic}到达${city}城市`)})

注意：组件实例和 vue实例都可以调用$on。

2. 兄弟组件传值

实现步骤：

定义模块 src/bus.js，内容就是导入Vue模块，并导出一个Vue实例对象：
```
import Vue from 'vue'
export default new Vue()
```
在各个兄弟组件中，导入 bus.js 模块：
```
import bus from '@/bus.js'
```
虽然bus.js被各个组件都导入，但是系统中bus只有一份。
在接收数据的兄弟组件的 created 生命周期方法里(使得事件及时响应)，发送数据的组件中声明

使用 bus.$on(‘事件名称’, (接收的数据) => {}) 定义事件成员方法
```
created(){// 定义事件,注意箭头函数应用bus.$on('xxx', data=>{console.log(data)})
}
```
xxx是事件方法的名称。data是形参，待接收数据，并且可以定义多个。

注意：如果$on内部要使用this，请通过"箭头函数"声明方法。

在发送数据的兄弟组件中，使用 bus.$emit(‘事件名称’, 要发送的数据) 来向外发送参数。

<button @click="sendMsg">传值</button>
export default {methods: {sendMsg(){// 触发绑定的事件，并向外传递参数。bus.$emit('xxx', '1000元保护费')}}
}

第一个参数xxx 是接收数据组件给bus声明的方法。第二个参数是传递的实参数据。

说明：

Vue实例可以调用$on()方法进行事件方法创建
```
实例.$on(名称,(形参，形参，形参……){})
```
参数根据需要，可以是一个或多个。
Vue实例可以调用$emit()方法进行事件方法执行
```
实例.$emit(名称,实参，实参，实参……)
```
参数与 $on的形参是一一对应的。

注意：

虽然各个兄弟组件针对bus.js都有做引入，系统在运行的时候只有一个bus对象，故大哥给 bus绑定的事件方法，兄弟组件可以通过bus调用。

案例应用：

兄弟组件传值

src/bus.js代码：

// 快递员，负责兄弟组件之间传递数据
import Vue from 'vue'
// 导出一个Vue对象
// 注意：这是一个新的对象，与main.js里边的没有关系
export default new Vue()

First.vue代码(created、$on设置事件方法，准备接受数据)：

<template><div id="first"><h3>大哥组件</h3><span>{{dt}}</span></div>
</template><script>
// 导入bus的模块对象
import bus from '@/bus.js'export default {name: 'First',data () {return {dt: ''}},// 第一时间就把事件声明好，以便小弟调用并传递数据created () {// 实例对象.$on(事件名称,function(形参,形参){}事件事件的回调方法)// 注意：回调函数变为箭头函数，使得this可以正确使用bus.$on('jieshou', msg => {// console.log(msg)// 把数据给dt接收this.dt = msg})}
}
</script>

Second.vue代码(bus调用$emit()调动事件进行数据传递)：

<template><div id="second"><h3>小弟组件</h3><button @click="back()">给大哥回话</button></div>
</template><script>
// 导入bus的模块对象
import bus from '@/bus.js'export default {name: 'Second',methods: {// 给大哥组件传值back () {// 使得bus调用自己的事件(是大哥给bus声明的)// bus.$emit(事件，参数，参数)bus.$emit('jieshou', '1000元保护费')}}
}
</script>

App.vue代码(引入、注册、使用各个兄弟组件)：

<template><div id="app"><h2>App根组件</h2><first></first><second></second></div>
</template><script>
// 引入、注册、使用 两个兄弟组件
import First from './components/First.vue'
import Second from './components/Second.vue'export default {components: {First,Second}
}
</script>

Vue组件传值——兄弟组件传值相关推荐

vue中，兄弟组件之间传值
vue中,兄弟组件之间传值项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
【Day13】说一下 Vue 组件的通信方式都有哪些？（父子组件，兄弟组件，多级嵌套组件等等）
说一下 Vue 组件的通信方式都有哪些?(父子组件,兄弟组件,多级嵌套组件等等) 一.父组件向子组件传值二.子组件向父组件传值三.兄弟组件传值四.跨组件一.父组件向子组件传值 1.1 prop ...
VUE 父子组件、兄弟组件之间通信最强详解
目录 1. 父组件调用子组件内参数/方法 1.1 通过 ref 调用/获取子组件内参数/方法 2. 子组件调用父组件内参数/方法 2.1 通过 emit 调用父组件方法 2.2 通过 ...
Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）
前言除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间是如何通信的.
vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
vue父子，兄弟组件传值
一.父子组件通讯子组件给父组件传值 1.子组件页面 childA <template><div class="childA"><div>这里是 ...
vue3之语法糖script setup的父子组件、兄弟组件传值
背景:随着vue的使用范围越来越广,使用人数越来越多,其的发展更新速度也是再上一个台阶,vue2故好,但组件化过程中的某些组件化操作稍微有一些弊端,从而vue3随之诞生,vue3兼容typescrip ...
父子组建传值_父子组件及兄弟组件传值demo
vue示例此文档包含Vue,React和小程序示例首先说一下三者在父子组件传值的异同点,语法上三者在父级向子级传递过程中都使用的是props,父级定义内容,子级进行接收.而在子级向父级进行传递过程 ...

Vue组件传值——兄弟组件传值

兄弟组件传值

1. 声明事件

2. 兄弟组件传值

Vue组件传值——兄弟组件传值相关推荐

最新文章

热门文章