Vue---兄弟组件通信(三种方式)

  • 浏览:8364
  • |
  • 更新:

Vue兄弟组件通信的方式常用的有三种。

方法/步骤

  1. 1

    第一种:eventBus

    新建一个js文件, 我这里叫做 bus.js;

    文件内容:

              import Vue from 'vue';  

             export default new Vue();

       然后在你需要触发的 组件中引入   import   bus  from  '文件路径'

             执行:bus.$emit('触发名称', 传输的数据 )

    最后在你需要的通信的另一个组件中   mounted生命周期钩子中执行如下:

        bus.$on('触发名称', res => {

        //写你需要的方法

    })

  2. 2

    第二种:直接在 main.js中 直接如下

    然后其中一个兄弟组件 执行

    this.$root.vm.$emit('触发名称', 传输的数据);

    另一个兄弟组件中执行

    this.$root.vm.$on('触发名称', 传输的数据);

    Vue---兄弟组件通信(三种方式)
  3. 2
    该信息非法爬取自百度经验
  4. 3

    第三种:同样是直接在 main.js

    注意:emit  和 on 中 第一参数 触发名称 必须相同,同时二者原理一致

    同时,需要关闭该通信,尤其是接口调用的时候,关闭方法 this.**.$off("通信名称")

    Vue---兄弟组件通信(三种方式)
    END
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。
展开阅读全部