郭世都

  • 主页
所有文章 友链 关于我

郭世都

  • 主页

vue--事件总线初接触

2019-07-22

vue–事件总线初接触

Vue-cli事件总线步骤(非全局—有路由跳转不生效的情况,请看最后的总结)
1.创建一个js文件(最好创建一个utils文件夹,把这个js放在其中),这里命名为Bus.js

2.在Bus.js文件中写入
import Vue from ‘vue’
export const EventBus = new Vue()
……
3.在使用到的组件中都要引入(因为是非全局的)
import { EventBus } from “../utils/Bus”

4.发布订阅
在事件中调用发布订阅方法,其中bus是对应的名字,接收时要对应起来,这里发布的数据是一个对象,接收的话也会是一个对象,所以注意接收值的结构,
EventBus.$emit(“bus”, {
nr: this.busVal
});

5.接收组件
在接收的组件中也引入
import { EventBus } from “../utils/Bus”
然后在mounted或其他钩子函数(根据实际情况而定),写接收函数
EventBus.$on(‘bus’, busVal => {
this.val = busVal.nr
EventBus.$off(‘bus’)
})

注意这里的”bus”是名字,虽然是自定义的但与发布订阅要对应,
busVal是形参可自定义,最后确认使用完毕后要清除对应的事件总线。

Vue-cli 事件总线demo总结

本次遇到的问题:
路由跳转后,可以在控制台打印值,但无法渲染进视图
原因 :与路由跳转的加载与销毁顺序有关
解决办法:
将发布订阅写在destroyed()钩子函数中,这样会在组件销毁时发布订阅

在接受订阅的组件中

注意写在created()钩子函数中的话一定要写this.$nextTick()函数中,也是顺序原因

这是有路由跳转的情况下需要的,如果不需要路由跳转就不用了,可以直接发布并得到值,每当值改变都会触发$on

赏

谢谢你为我点赞

支付宝
微信
  • Vue

扫一扫,分享到微信

微信分享二维码
Hexo 功能添加
Hexo个人安装总结
  1. 1. vue–事件总线初接触

0 评论
Powered By Valine
v1.5.2
© 2019 郭世都
  • 所有文章
  • 友链
  • 关于我

tag:

  • 安装总结
  • ES6
  • Vue
  • 日常工作
  • 个人理解

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 前端编程模块化

    2019-08-12

    #ES6

  • Promise

    2019-08-12

    #ES6

  • 伪数组

    2019-08-09

    #ES6

  • axios 相关配置及注解

    2019-08-09

    #Vue

  • qs插件

    2019-08-09

    #Vue

  • 数组循环(含ES6)

    2019-08-07

    #ES6

  • webpack个人理解

    2019-08-05

    #个人理解

  • 关于手机照片放入img 标签中被旋转问题

    2019-07-24

    #日常工作

  • Hexo 功能添加

    2019-07-22

    #安装总结

  • vue--事件总线初接触

    2019-07-22

    #Vue

  • Hexo个人安装总结

    2019-07-20

    #安装总结

  • 友情链接1
  • 友情链接2
  • 友情链接3
  • 友情链接4
  • 友情链接5
  • 友情链接6
本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、JavaScript、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、python、Objective-C、ActionScript、Pascal、spss、sas等单词的拼写,熟悉Windows、Linux、Mac、Android、IOS、WP8等系统的开关机。