​持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

前言

今天呢,有个需求是 : A (子组件)-> B(父组件) ->  C(子组件)

看这个估计有点看不懂,下面就用文字描述

就是A子组件里面的input值 要传给 C组件，它俩虽然为兄弟关系，也知道这时要用兄弟（跨组件）传值，但奈何 自己只喜欢使用父子传值，（其实就是不会兄弟传值(/ω＼)），

原本说

父子传值也可以 A（this.$emit('事件名',传值)）B（@事件名="函数名" 在methods里定义 事件名函数）B中能打印出A的值，然后 B（：props接收的名字 = “父组件传过来的值”） C（props：【‘props接收的名字’】），然后对数据进行处理

原本这样也可以使用的，思路也是对的，奈何，整个文件中promise.then 跟async 、await 混用，导致 C的结果先打印，(这时,input的值都还没有输入 C的结果就出来了,后来在A中输入 C中无法打印出A的值) 值没有传过去，最终放弃了，使用 eventbus的方法

给大家简短的分享下

使用

第一步

在 src 下面建立个文件夹 bus / bus.js (名字喜欢啥就自己取)

import Vue from "vue";
//兄弟组件之间进行通行
export default new Vue();

第二步

在 A文件 (传值的文件)中

// 引入

import bus from "@/bus/bus";

methods: {
    
   // 点击搜索按钮
    send() {
      this.searchPlaceInput = this.inputObject.userInput;
      console.log("搜索值", this.searchPlaceInput);
      // 向表单 site-info传值
      bus.$emit("inp", this.searchPlaceInput);
    },
    
}

在 C文件中 接收值

import bus from "@/bus/bus";

 mounted() {
    // 接收map 地图传过来的搜索值
    bus.$on("inp", (data) => {
      console.log(data); // data就是它传过来的值
      this.station.stationLng = data;
      this.station.stationLat = data;
    });
  },

小结

等自己写完后,才发现原来 中间栈 bus 传值 真爽

​