A组件往B组件传递数据data

1.src下创建文件eventBus.js,内容:

import Vue from 'vue'
export default new Vue()

2.在A,B组件分别引入

import eventBus from'@/eventBus.js'

3.A组件开始传递

eventBus.$emit('datalist',data)

4.B组件接收

created(){
eventBus.$on('datalist',(message)=>{
console.log(message)
})
},

vue使用bus.js在兄弟组件传值的更多相关文章

  1. vue 父子组件传值,兄弟组件传值

    父子组件中的传值 父向子    v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...

  2. 第七十五篇:Vue兄弟组件传值

    好家伙, 兄弟组件的传值用到Eventbus组件, 1.EventBus的使用步骤 ① 创建 eventBus.js 模块,并向外共享一个Vue的实例对象 ②在数据发送方, 调用bus.$emit(' ...

  3. react 兄弟组件传值(发布订阅,使用于任何组件传值,包括vue)

    react中兄弟组件传值常规操作一般是,A组件传给父组件,父组件再传给B组件 非常规操作 利用  pubsub-js 在Home组件内调用 PubSub.publish("第一个参数是事件名 ...

  4. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  5. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  6. vue3 语法糖setup 兄弟组件传值

    使用 mitt // 全局引入 npm install mitt 或者 cnpm install mitt 在main文件中挂载 import { createApp } from 'vue' imp ...

  7. React中兄弟组件传值

    兄弟组件传值 实际上是间接的通过第三方来实现传值,举例,第一个儿子把值传给父亲,父亲在把这个值传给第二个儿子,这样就实现了兄弟组件传值 来看代码: 父组件代码 import React from 'r ...

  8. vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例

    vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...

  9. vue.js 兄弟组件传值

    另:  在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了,虽然可以使用事件监听的方式,但还是不如vuex专业.比如A组件要告 ...

  10. 使用Bus.js进行兄弟(非父子)组件通信

    首先需要在任意地方添加一个bus.js: 在bus.js里面 写入下面信息 import Vue from 'vue' export default new Vue; 在需要通信的组件都引入Bus.j ...

随机推荐

  1. ARM之AXI总线协议初试

    AXI总线协议的学习 1.AXI总线的初步认识 What is AXI? AXI is part of ARM AMBA, a family of micro controller buses fir ...

  2. KingbaseES 查看函数中最耗时的sql

    测试 创建测试环境所需表及函数 create table test1(id int); INSERT INTO test1(id) VALUES (generate_series(1, 10000)) ...

  3. KingbaseES V8R6 集群运维案例之 -- VIP配置错误导致集群切换失败

    案例说明: KingbaseES V8R6集群的vip在repmgr.conf中配置,本案例测试了手工卸载和加载vip的操作,对failover切换时vip的卸载和加载的影响. 适用版本: Kingb ...

  4. #单位根反演,二项式定理#LOJ 6485 LJJ 学二项式定理

    题目 \[\large\sum_{i=0}^nC(n,i)S^ia_{i\bmod 4} \] \(n\leq 10^{18},S,a\leq 10^8\) 分析 前面这一坨看起来就像是二项式定理,考 ...

  5. 使用OHOS SDK构建vorbis

    参照OHOS IDE和SDK的安装方法配置好开发环境. 从github下载源码. 执行如下命令: git clone --depth=1 https://github.com/xiph/vorbis ...

  6. C++ 开发者必读经典书籍推荐

    如果你正在学习C++,那么一本好的教材或参考书可以事半功倍.以下是几本我个人推荐的C++书籍或视频 C++基础 看书 C++ Primer C++程序设计语言 Effective C++ More E ...

  7. Avalonia的模板控件(Templated Controls)

    在Avalonia的UI框架中,TemplatedControl是一个核心组件,它提供了一种强大的方式来创建可重用且高度可定制的控件. 本文将深入探讨TemplatedControl的概念.其带来的优 ...

  8. Spring源码 19 IOC getBean方法

    前面实现了 ClassPathXmlApplicationContext 的构造,接下来分析其调用的 getBean 方法. 以 getBean(UserDao.class) 为例. 1 Abstra ...

  9. 如何打造3D立体世界?跟随图片一同探寻

    怎样让平面的手机,呈现出炫酷的三维立体世界效果?虚拟与现实又要怎样完美结合? HMS Core图形等领域能力全面开放,使能3D数字世界创新.请跟随图片一起进入HMS Core打造的3D立体世界吧. 了 ...

  10. 一图读懂HUAWEI HiAI Foundation

    作为华为端侧AI的创新开放平台,HMS Core的HUAWEI HiAI Foundation开放AI算力,助力AI应用高效开发,同时联合多领域打造AI生态,实现日调用600亿次的突破,助力AI生态繁 ...