纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue之bus总线简单使用 vue之bus总线简单使用讲解

牛先森家的牛奶   2021-09-13 我要评论
想了解vue之bus总线简单使用讲解的相关内容吗,牛先森家的牛奶在本文为您仔细讲解vue之bus总线简单使用的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue之bus总线,vue之bus总线使用,下面大家一起来学习吧。

vue之bus总线的简单使用

场景描述:

A组件中包括B,C组件,而B组件中包括D组件,这时如果D组件想要在A组件中触发C组件的方法怎么办呢?

当然方案是有的,用状态管理vuex可以,用$emit传递也可以,但是我想试着用的是bus总线的方式;

如下:

D组件中触发bus的emit ,然后在A组件中用bus总线的on来触发方法;

D组件中

dataLoad(){
   console.log('加载完触发事件');
   this.$bus.$emit('itemDataLoad') 
   // this.$bus.$emit('事件名称', 参数) // 第二个可以为参数
},

A组件中

 mounted() {
    // 监听item中数据加载完
    this.$bus.$on('itemDataLoad', () => {
      console.log('数据加载完');
    })
    // this.$bus.$on('事件名称', 回调函数(参数))
  },

当然在A组件中通过 this.$refs 的方式就可以触发C组件中的事件等

还有一步骤是 $bus 默认是不存在的啊,打印试试this.$bus为undefined啊;

别急,在main.js中加上$bus;

// bus总线 vue实例
Vue.prototype.$bus = new Vue()

当然可以在生命周期中移除bus总线;

this.$bus.$off();

记录封装的防抖函数

// 防抖函数
  debounce: function (fun, delay) {
    let timer = null
    // 接收调用函数时传入的参数的值 ...args 可多个
    return function (...args) {
      if (tiemr) return
      timer = setTimeout(() => {
        fun.apply(this, args)
      }, delay);
    }
  }

const refresh = debounce(xxx, 500)

refresh('参数1', '参数2', '参数3')

到此这篇关于vue之bus总线简单使用讲解的文章就介绍到这了,更多相关vue之bus总线简单使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


相关文章

猜您喜欢

  • js中的位置计算 一篇文章让你彻底搞懂js中的位置计算

    想了解一篇文章让你彻底搞懂js中的位置计算的相关内容吗,19组清风在本文为您仔细讲解js中的位置计算的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js获取当前位置,js获取位置,js设置scroll的宽度,下面大家一起来学习吧。..
  • Java Map 深入浅出讲解Java集合之Map接口

    想了解深入浅出讲解Java集合之Map接口的相关内容吗,威斯布鲁克.猩猩在本文为您仔细讲解Java Map的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Java,Map,Java,Map接口,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.hao45.cc 【好下载】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式