• bus传值


    bus上可以定义一个事件,

    bus上可以触发事件

    不论是组件还是js模块,都可以用引入bus

    bus的意义就是,在多个组件存在复杂情况下,比如:a组件上点击一个按钮,要在毫不相关的y组件上弹出一个弹窗。如果用父子事件传递,$emit触发,会非常不方便。

    此时,可以如下操作:

    a组件:

    <button @click='$bus.$emit("alertEvent")'>btn</button>

    y组件:

    methods:{
    handleAlertEvent(){
    console.log("a组件的按钮点击了")}
    },
    created(){
      this.$bus.$on('alertEvent',handleAlertEvent)
    },
    beforeDestory(){

    this.$bus.$off('alertEvent',handleAlertEvent)

    }

    bus通常是一个vue对象;

    const app = new Vue()
    Vue.prototype.$bus = app;
    export default app;//让js模块里也可以用到,

    bus的源码简写

    const bus = {
      //事件名称和事件回调函数的对应;
      __events__: {},//这是一个以事件名作为属性名,属性值是元素是回调函数的set
      $on(event, fn) {
        if (!this.__events__[event]) {
          this.__events__[event] = new Set();
        }
        this.__events__[event].add(fn)
      },
      $off(event, fn) {
        this.__events__[event].delete(fn)
      },
      $emit(event) {
        const set = this.__events__[event];
        if (set) {
          set.forEach(item => item())
        }
      },
    
    };
  • 相关阅读:
    hibernate 总结
    事物随笔
    添加收藏夹的作法
    jquery uploadify多文件上传
    过滤器与拦截器的区别
    网站首页添加缓存--------ehcache的简单使用
    DWR 在项目中的应用
    分页标签:pager-taglib的使用
    关闭iptables(Centos)
    Centos移除图形界面
  • 原文地址:https://www.cnblogs.com/dangdanghepingping/p/14845819.html
Copyright © 2020-2023  润新知