zoukankan      html  css  js  c++  java
  • 回顾vue 事件总线

    vue中的参数传递方式有

    • 父子组件中通过props,$emit互相传递
    • event bus事件总线
    • vuex

      第一种局限于只能在父子组件中传递,如果要在兄弟组件之间传递就要用到事件总线event bus或者vuex来实现。这里讨论的是event bus这种实现方式。

      这个集中式的事件中间件就是 Bus。

      在man.js中初始化   EventBus

    Vue.prototype.$EventBus = new Vue()

    然后在组件中,可以使用$emit, $on, $off 分别来分发、监听、取消监听事件:

    分发事件的组件

    // ...
    methods: {
      todo: function () {
        this.$bus.$emit('todoSth', params);  //params是传递的参数
        //...
      }
    }

    监听的组件

    // ...
    created() {
      this.$bus.$on('todoSth', (params) => {  //获取传递的参数并进行操作
          //todo something
      })
    },
    // 最好在组件销毁前
    // 清除事件监听
    beforeDestroy () {
      this.$bus.$off('todoSth');
    },

    如果需要监听多个组件,只需要更改 bus 的 eventName:

    // ...
    created() {
      this.$bus.$on('firstTodo', this.firstTodo);
      this.$bus.$on('secondTodo', this.secondTodo);
    },
    // 清除事件监听
    beforeDestroy () {
      this.$bus.$off('firstTodo', this.firstTodo);
      this.$bus.$off('secondTodo', this.secondTodo);
    },
  • 相关阅读:
    easyUI日期框,默认显示今天,今天以后的日期不能选
    vue实现下拉框全选和输入匹配
    【转载】CSS flex属性深入理解
    ES6学习之二
    Centos7(Firewall)防火墙命令
    DeDeCMS模板标签(2)
    DeDeCMS模板标签(1)
    常用js正则表达式大全
    linux yum 命令
    Linux软链接和硬链接
  • 原文地址:https://www.cnblogs.com/qdjj/p/14863757.html
Copyright © 2011-2022 走看看