vue-cli 使用vue-bus来全局控制的实例讲解

讲真，我写标题的时候不知道怎么写的好，之前写过一篇关于vue-bus的，不过是基础版本的，今天讲的是用脚手架来搭建的环境下的使用
与使用路由相似，我们需要先倒入这个vue-bus

指令如下：

npm install vue-bus

导入成功后，我们就要去使用它，（还是参考路由）

我们在代码中写下：

<code class="language-html">import bus from "vue-bus"
Vue.use(bus); 

</code>

是的，这跟路由很想，这点无需怀疑，接着我们可以参考下我上回的那个模板。依旧是三部曲，现在我们已经完成了部署环境这一步，接着是要去提交（emit方法）

this.$bus.$emit("password", this.password);

但是，这里要注意一点，就是作用域的问题，（es5写法下）。比如在下面代码中：

methods1: function(a) {
  console.log(a);
  var _this = this;
  //转化为base64,并且显示在页面上
  console.log(a.target.files[0]);
  var image = new Image();
  var reader = new FileReader();
  reader.readAsDataURL(a.target.files[0]);
  reader.onload = function(e) {
   console.log(e.target.result);
   _this.imglist[a.target.dataset.index].img = e.target.result;
  }
  },

上方代码是一段将file转化为base64的代码。其中，当我们在最外层使用this的时候，他的指向是我们想要的，包含这个组件的this，但是当我们在onload函数中使用this，那就嘻嘻了，所以这些由于自己不小心踏入的坑要避免

接着我们上去获取我们所要的信息，依旧是用on方法（相似的，如果是使用once方法。则是只有一次）

很多情况下，由于on方法是去监听，所以我们是要越早定义越好，所以基本都是在created中定义

created: function() {
  console.log(this.showinfo);
  var _this = this;
  this.$bus.$on("changes", function(a, b) {
  console.log(_this.showinfo);
  //this.showinfo[0].text="2017-00-00";
  _this.showinfo = [{ text: "生日", value: "2017-01-01" }, { text: "星座", value: "白羊座" }, { text: "职业", value: "IT" }]
  }, );
  _this.$bus.$on("showmyticket", function() {
  _this.isshowbarrage_black=true;
  _this.isshowmyticket=true;
  });
 },

其中应该都注意到了，这里依旧是那个坑的问题，如果不这样做，我们在使用过后可能会出现这个现象

这就是bug大的出生原因了，这时候我们就要考虑作用域的问题了

基本就是这些。而且相对于vuex，vue-bus更简单，而且不会再局限于兄弟组件之间，而且在父子级别中也可以使用，但是请小心，因为他是监听状态，所以使用emit的时候要谨慎，当然，我也不强制要求你去销毁这个bus，希望大家都多去试试。

以上这篇vue-cli 使用vue-bus来全局控制的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue使用 vue-cli 搭建项目

    详解Vue使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli  一. 安装 node.js 首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包. 安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功.  二.安装 vue-cli 安装好了 node,我们可以直接全局安装 vue-

  • Vue中建立全局引用或者全局命令的方法

    Vue中建立全局引用或者全局命令的方法

    如何在Vue中建立全局引用或者全局命令,具体内容如下 1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import 一次模块. 如果是基于vue.js编写的插件我们可以用 Vue.use(...) main.js 2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办? 第一步:最好建立一个全局的命令文件例如:directive/directive.js 第二步:利用Vue.directive()建立一个全局

  • vue bus全局事件中心简单Demo详解

    1.vue-cli搭建好项目之后,使用npm安装vue-bus  npm install vue-bus 2.在入口文件main.js中全局注册 import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 3.传递数据: this.$bus.emit("eventName",data) 4.接收数据: this.$bus.on("eventName",data) 5.注意事项 this的

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • vue-cli 使用vue-bus来全局控制的实例讲解

    讲真,我写标题的时候不知道怎么写的好,之前写过一篇关于vue-bus的,不过是基础版本的,今天讲的是用脚手架来搭建的环境下的使用 与使用路由相似,我们需要先倒入这个vue-bus 指令如下: npm install vue-bus 导入成功后,我们就要去使用它,(还是参考路由) 我们在代码中写下: <code class="language-html">import bus from "vue-bus" Vue.use(bus); </code&g

  • vue cli使用融云实现聊天功能的实例代码

    先看下vue-cli的使用 1:安装node 2:npm i vue-cli -g npm install --global vue-cli 3:vue list 可以查看模板 4:选择一个模板,初始化项目,例如vue init webpack myPro 5:cd myPro  进入项目根目录 6:npm install    安装依赖 7:npm run dev   运行项目 正文开始 公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹

  • vue进行图片的预加载watch用法实例讲解

    watch应用场景 我想信图片预加载大家肯定都有接触过,当图片量大的时候,为了保证页面图片都加载出来的时候,我们才把主页面给显示出来,再进行一些ajax请求,或者逻辑操作 那此时你用computed对这种监听一个数据然后进行一系列逻辑操作和ajax请求,那watch再适合不过了,如果用computed的话那你连实现都实现不了,只有用watch监听 <template> <div v-show=show> <img src="https://img.alicdn.co

  • vue 纯js监听滚动条到底部的实例讲解

    在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议. 1.怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: window.onscroll = function(

  • vue项目中跳转到外部链接的实例讲解

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = 'url'来实现,具体代码如下: <span @click="See(item.qj_url)">360全景看房</s

  • Vue.js点击切换按钮改变内容的实例讲解

    代码实例: 代码描述:点击切换按钮,来改变显示的内容,切换不同的单位.flag相当于一个开关,控制开关的改变,来切换不同的单位.同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换改变内容</title> <script src="https://cdn.bo

  • vue cli 局部混入mixin和全局混入mixin的过程

    vue cli 局部混入mixin和全局混入mixin的过程

    目录 局部混入mixin和全局混入mixin 应用场景 1.局部混入mixin 2.全局混入mixin mixins的使用方法和注意点 局部混入mixin和全局混入mixin 应用场景 两个组件,都需要用到同一个点击事件方法,此时使用mixin混入,可以很好的实现代码的复用. 在vue cli搭建的项目中,src目录下新建mixin.js文件: // 对外暴露mixin对象 export const mixin = { data() { return { msg: 'hello' } }, me

  • Vue cli及Vue router实例详解

    Vue cli及Vue router实例详解

    目录 前言: 1. 安装 1.1 npm安装 1.2 vue-cli安装 2. 初始化项目 2.1vue init命令讲解 2.2 项目初始化 3. 运行项目 4. 成功页面 5. 项目结构 5.1 总体框架 5.2 配置目录文件详解 5.3src项目核心文件讲解 6. VUE-ROUTER 6.1 快速入门 6.2 页面跳转 6.3子路由-路由嵌套 6.4路由传递参数 6.5命名路由-命名视图-重定向-别名 前言: 官方文档 vue-cli是vue官方出品的快速构建单页应用的脚手架,里面集成了

  • vue把输入框的内容添加到页面的实例讲解

    vue最最最简单的demo(记得引入) 实例化一个vue,绑定#app的元素,要渲染的数组arr作为data. 把arr的item渲染到页面,输入内容点击按钮把用户输入的内容添加到页面以及数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • Vue CLI 3搭建vue+vuex最全分析(推荐)

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack和 webpack-dev-server之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如:

随机推荐