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. Tableau 绘制圆环图

    一.对应数据如下所示 二.打开tableau连接对应Excel数据源,将记录数字段连续拖动两次到行,显示设置按整个视图显示,标记里面设置按饼图显示 三.设置两个值按度量值平均值显示,并调整第一个图稍微 ...

  2. 一周内容分享(第 10 期):别让自己"墙"了自己

    这里记录过去一周,我看到的值得分享的东西. 一方面是整理记录一下自己一周的学习,另一方面也是期待自己有更多的输出,有更多的价值. 周刊开源(Github:wmyskxz/weekly),欢迎提交 is ...

  3. KingbaseES V8R6备份恢复案例之---备份crond计划任务的调整

    案例说明: 在KingbaseES V8R6数据库通常备份建立的crond任务,默认由root用户建立,写入到/etc/cron.d/KINGBASECRON文件中,在有的生产环境限制了普通用户使用r ...

  4. UE4接口

    官方链接 目的 不同Actor对象具有同一个功能,比如角色按F键可以实现开门,开车,与NPC沟通等操作.其本质就是让所有的Actor对象除了继承UObject以外,再继承这个接口类. 接口的声明 宏的 ...

  5. [Unity3D] 使用LineRenderer实现尾迹与虚线效果

    Unity3D 使用LineRenderer绘制尾迹与虚线 1.添加LineRenderer组件 先创建一个3D对象,然后点击Add Component选项 搜索并添加LineRenderer组件 添 ...

  6. #线段树合并#洛谷 3224 [HNOI2012]永无乡

    题目 分析 和主席树不同的是,线段树合并后原树的信息不会保留, 这样就保证空间和常数都比较小,这题比较裸,直接上代码 代码 #include <cstdio> #include <c ...

  7. npm/cnpm 设置镜像地址

    npm 查看当前镜像源: npm config get registry # https://registry.npmjs.org/ 修改当前镜像源: npm config set registry ...

  8. 报名启动|OpenHarmony源码转换器—多线程特性转换赛题

  9. Python - 字典1

    字典用于存储键值对形式的数据.字典是一个有序.可更改的集合,不允许重复.从 Python 3.7 版本开始,字典是有序的.在 Python 3.6 及更早版本中,字典是无序的.字典用花括号编写,具有键 ...

  10. IDEA Tab键设置为4个空格

    在不同的编辑器里 Tab 的长度可能会不一致,这会导致有 Tab 的代码,用不同的编辑器打开时,格式可能会乱. 而且代码压缩时,空格会有更好的压缩率. 所以建议将 IDEA 的 Tab 键设置为 4 ...