美文网首页
未使用vuex;实现兄弟组件触发事件

未使用vuex;实现兄弟组件触发事件

作者: 卓小生 | 来源:发表于2018-07-12 15:37 被阅读0次
  • 先创建eventBus.js
import Vue from 'vue'
export default new Vue;
  • 先兄弟组件分别引入
import bus from '@utils/eventBus'
methods:{
  reply (val) {
     bus.$emit('alert', val)
  },
}

触发reply 调用alert事件

  • 触发组件
created: async function() {
        // 销毁事件
        bus.$off();
        // 兄弟组件调用事件
        let _this = this
        bus.$on('alert', async function(msg) {
            let params = {
                complainid: msg
            }
            let res = await Http.post(Api.details.details, params);
            let data = res.data.data;
            _this.details = data;
        })
    },

相关文章

  • 未使用vuex;实现兄弟组件触发事件

    先创建eventBus.js 先兄弟组件分别引入 触发reply 调用alert事件 触发组件

  • vue事件总线EventBus

    vue组件有父子组件通信:props兄弟组件通信:可以使用vuex,还可以使用事件总线eventBus 使用方法:...

  • vuex最详细完整的使用用法

    为什么使用vuex? vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父...

  • 04 Vue中组件通信(下)

    使用vuex来实现组件通信一、vuex 的安装与使用 安装npm install vuex -S 使用 二、 vu...

  • Vuex

    1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局...

  • VUE兄弟组件传值

    兄弟组件传值 创建一个实例,向这个实例上添加事件,然后在另外的实例中触发事件,即可实现传值 $on 添加事件 $e...

  • vue组件之间通信

    vue父组件给子组件传参使用props子组件给父组件传参使用时间派发$dispatch兄弟组件之间传递参数使用vuex

  • $emit $on

    emit用于触发事件on用于监听事件 可以用于父子、兄弟组件之间的通信

  • Vue父子组件通信之$emit(基于vue2.5,ES6)

    一、$emit的作用 在Vue中,父组件监听子组件触发的事件,需要在子组件用使用 $emit 触发,在父组件中使用...

  • mpvue常见问题总结,看看你有没有遇到(二)

    1.子组件给父组件传值 a.先在子组件中定义事件,当触发这个事件后才开始传值 b.当触发子组件中的事件后,使用...

网友评论

      本文标题:未使用vuex;实现兄弟组件触发事件

      本文链接:https://www.haomeiwen.com/subject/bzavuftx.html