1.新建bus.js文件:

import Vue from 'vue'
export default new Vue;

2.在需要通信组件A,B中引入bus:

A组件:

import Bus from "@/assets/bus.js";
methods: {
handleClick: function () {
this.$nextTick(function () { //解决第一次监听不到数据
Bus.$emit('sendData', ‘我是传递的数据’)
})
}
}

B组件:

import Bus from "@/assets/bus.js";
mounted() {
Bus.$on("sendData", val => {
console.log(val)
});
},
 

20、解决Vue使用bus兄弟组件间传值,第一次监听不到数据的更多相关文章

  1. Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue中兄弟组件间通讯

    vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...

  3. Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化

    一,  兄弟组件间联动 1.  点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...

  4. Vue2不使用Vuex如何实现兄弟组件间的通信

    在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...

  5. Vue中组件间传值常用的几种方式

    版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...

  6. Vue-组件传值:子传父和兄弟组件间常见的传值方式

    前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...

  7. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  8. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  9. 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

随机推荐

  1. nginx访问限制

    nginx的访问控制 1.http_access_module   基于ip的访问控制 允许的访问配置 不允许的访问配置 server { listen 80; server_name localho ...

  2. ORM基本增删改查

    将上一节建造好的数据库 引入Navicate copy_path找到数据表路径 再用navicat打开 创建好的db不只一张表,其中第一张是我们创建的可以用的表  ,其他都是django自带功能所需表 ...

  3. ajax中什么时候进success和error

    先简单介绍下ajax: 简单的说Ajax请求通过XMLHttpRequest对象发送请求,该对象有四个状态(readyState): -未初始化.-正在初始化.-发送数据.-正在发送数据.-完成. 当 ...

  4. css 布局 一中一右

    .container { position: relative; .my-center { text-align: center; line-height: 30rpx; min-width: 400 ...

  5. 初识PIXI.js

    由于项目需要接触到PIXI这个框架,故开始了一顿打头操作 由于目前PIXI的文档还是很少,而且大多数是英文文档这里提供几个PIXI的demo和文档 demo: http://47.99.120.179 ...

  6. python3中“->”的含义

    ->:标记返回函数注释,信息作为.__annotations__属性提供 __annotations__属性是字典.键return是用于在箭头后检索值的键.但是在Python中3.5,PEP 4 ...

  7. haproxy 配置文件详解 之 defaults

    配置示例: defaults mode http retries timeout connect 10s timeout client 20s timeout server 30s timeout c ...

  8. vue-waterfall2 实现瀑布流,及总结的问题

    1.安装 npm install vue-waterfall2@1.8.20 --save    (提示:一定要安装1.8.20,最新版会有一部分问题) 2.打开main.js文件 import wa ...

  9. 牛逼哄哄的 Lambda 表达式,简洁优雅就是生产力!

    阅读本文大概需要 4 分钟. 作者:Sevenvidia https://www.zhihu.com/question/20125256/answer/324121308 什么是Lambda? 我们知 ...

  10. 微信公众平台开发(150)——从新浪云SAE上传图片到图文消息

    从新浪云SAE上传图片到图文消息,只能用于图文消息中, 没有个数限制 if (!empty($_FILES['qrcode']['name'])){ $filename = time()." ...