VUE：兄弟组件间传参

刺骨的言语ヽ痛彻心扉 2022-03-26 06:58 811阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

1、定义一个中间  eventBus.js  ，只有 2 行代码，用于传参：

// 此页面是vue 巴士，用于兄弟组件间通信
    import Vue from 'vue'
    export default new Vue()

2. 在要传参和接收参数的各个兄弟组件中引入这个 js :

// 巴士：用于兄弟组件间传值
    import bus from "../../../../../static/base/eventBus.js";

3. 参数 传出：

// 传参到兄弟组件：queryBtn。queryParamMap是参数，可以传多个参数，用逗号分隔
    // bus.$emit("监听的事件名", 参数);
    
       bus.$emit("queryParam", queryParamMap);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

4. 接收：( 可同时多个兄弟组件接收。 )

bus.$on("queryParam", queryParamMap => {...}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2][]

这样就可以了。

[Link 1]: https://www.captainai.net/jiangyu1013/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220326/acb35ece302f4809b10801ef8536d511.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1]: /images/20220326/fdcf7232b155444fb28f2de75510e9df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2]: /images/20220326/a9577d1c199c49e69fa6bb67b086c0fe.png