20、解决Vue使用bus兄弟组件间传值，第一次监听不到数据

JavaScript组件通信bus文件使用

转载于 2019-07-11 11:13:00 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xlfdqf/p/11168793.html

文章标签：

#javascript #ViewUI

博客介绍了在JavaScript中实现组件通信的方法，先新建bus.js文件，然后在需要通信的组件A和组件B中引入bus，还给出了参考链接。

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)
    });
  },

转载于:https://www.cnblogs.com/xlfdqf/p/11168793.html