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. LeetCode 1123. Lowest Common Ancestor of Deepest Leaves

    原题链接在这里:https://leetcode.com/problems/lowest-common-ancestor-of-deepest-leaves/ 题目: Given a rooted b ...

  2. 2.shell编程-函数的高级用法

    2.1.函数的定义和使用 函数基本使用 [root@VM_0_9_centos ~]# test() > {} -bash: syntax error near unexpected token ...

  3. 这里有一个url=https://www/.baidu.com/s?id=111&name=yourname,写一个函数获取query的参数和值存放在一个对象

    console.log(getJson(url)); function getJson(url){ var obj={}; var arr=url.split("?")[1].sp ...

  4. K8s容器资源限制

    在K8s中定义Pod中运行容器有两个维度的限制: 1. 资源需求:即运行Pod的节点必须满足运行Pod的最基本需求才能运行Pod. 如: Pod运行至少需要2G内存,1核CPU    2. 资源限额: ...

  5. code 1716

    # import_company def test_import_company(self): headers=self.headers headers["Content-Type" ...

  6. Unix/Linux小计

    1. centos查看cpu信息 cat /proc/cpuinfo processor有几个就是有几个cpu,每一列是每个cpu的信息 每个processor中的cores是当前cpu中有几个核心. ...

  7. 重启nova-scheduler服务,报错Login was refused using authentication mechanism AMQPLAIN

    问题描述 运行 systemctl restart openstack-nova-scheduler.service 失败,查看日志报错如下: 2019-12-22 14:52:27.426 1513 ...

  8. React组件介绍与使用(父传子、子传父、兄弟传)

    1.创建组件的方法     1.1.函数式无状态组件 1.1.1.语法 1 function myComponent(props) { 2 return 3 <div>Hello {pro ...

  9. Maven 教程(20)— 使用maven-assembly-plugin插件来定制化打包

    原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79777976 简单的说,maven-assembly-plugin 就是用来帮助 ...

  10. OpenCV使用CMake和MinGW的编译安装

    官方教程:https://wiki.qt.io/How_to_setup_Qt_and_openCV_on_Windows 软件环境: Qt:5.11 CMake-3.14.4 OpenCV-4.1. ...