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. 快速上手系列:webservice

    不同公司的系统交互,用webservice可以起到安全的作用. Webservice使用方法如下:   客户端: 这个是要打成jar包,给别人的用的,里面只是接口,没有实现.   用Webservic ...

  2. Prompt工程全攻略:15+Prompt框架一网打尽(BROKE、COAST、LangGPT)、学会提示词让大模型更高效

    Prompt工程全攻略:15+Prompt框架一网打尽(BROKE.COAST.LangGPT).学会提示词让大模型更高效 0.相关文章推荐 更多Prompt框架技术细节和原理见相关文章 Prompt ...

  3. 标准库unsafe:带你突破golang中的类型限制

    本文分享自华为云社区<突破语言golang中的类型限制>,作者:码乐. 1 简介 在使用c语言编程时,常常因为类型的问题大伤脑筋,而其他语言比如java,python默认类型又是难以改变的 ...

  4. ET介绍——强大的MongoBson库

    强大的MongoBson库 后端开发,统计了一下大概有这些场景需要用到序列化: 对象通过序列化反序列化clone 服务端数据库存储数据,二进制 分布式服务端,多进程间的消息,二进制 后端日志,文本格式 ...

  5. #博弈论,贪心#AT2376 [AGC014D] Black and White Tree

    题目传送门 分析 考虑到先手放一个白点后手必将在相邻位置放一个黑点, 如果没有合适的位置放黑点先手必胜,也就是问是否存在完美匹配, 直接从叶子节点到根贪心匹配即可 代码 #include <cs ...

  6. 深入理解 C++ 右值引用和移动语义:全面解析

    C++11引入了右值引用,它也是C++11最重要的新特性之一.原因在于它解决了C++的一大历史遗留问题,即消除了很多场景下的不必要的额外开销.即使你的代码中并不直接使用右值引用,也可以通过标准库,间接 ...

  7. 多次复制Excel符合要求的数据行:Python批量实现

      本文介绍基于Python语言,读取Excel表格文件数据,并基于其中某一列数据的值,将这一数据处于指定范围的那一行加以复制,并将所得结果保存为新的Excel表格文件的方法.   首先,我们来明确一 ...

  8. 详解Java Chassis 3与Spring Cloud的互操作

    本文分享自华为云社区<Java Chassis 3技术解密:与Spring Cloud的互操作>,作者: liubao68. Java Chassis 3一个很重要的设计原则:利用架构的韧 ...

  9. .NET MAUI开源免费的UI工具包 - Uranium

    前言 一直有小伙伴在微信公众号后台留言让我分享一下.NET MAUI相关的UI框架,今天大姚分享一个.NET MAUI开源.免费的UI工具包:Uranium. Uranium介绍 Uranium是一个 ...

  10. 【郑州轻工业大学】HarmonyOS宠物健康系统的开发分享

    原文:https://mp.weixin.qq.com/s/upcS6PcMS7UBR5jgoP7eow,点击链接查看更多技术内容. 本期我们给大家带来的是家庭宠物健康监测系统开发者杨光的分享,希望能 ...