详解vue 组件之间使用eventbus传值


Posted in Javascript onOctober 25, 2017

对于前端的我们而言,并非是只有写界面才是最大的问题,很多的情况下,我们需要关注的是数据,比如js页面的数据传递等等,学习vue我们也是需要知道怎么去使用数据

当然,使用存储也是可以得,但是并非一定要缓存,当然在vue中有推荐了我们去使用vuex去数据交互,Vuex会让你的Vue代码足够灵活可控,把数据统一存入state, 只允许通过Actions触发Mutations修改。然而,有时候我们的项目并没有复杂到需要用上Vuex。,(我们也不讨论已经废除的vm.$dispatch)很多情况下我们都是需要一个事件的捕获,这时候我们就可以用到vue的eventbus了

受用eventbus的方法很是简单,我们需要做三步事情,第一步,我们需要创造一个容器去充当我们的eventbus

第二步,我们需要去抛出,或者说提交我们的事件

第三步,我们去监听我们的那个事件(也许这才是第二部)

首先,我们需要在全局定义我们的eventbus

详解vue 组件之间使用eventbus传值

这里我们定义到了eventbus。这就简单的完成了我们的第一步,当然,全局变量,我想你应该知道定义在哪儿的

接着我们先去抛出这个事件,使用¥。emit去“提交”

详解vue 组件之间使用eventbus传值

怎样,这点都可以理解吧,其次我们经行第三步,去监听

详解vue 组件之间使用eventbus传值

当然。这里已经监听好的。点击事件俺只是个累赘,

接下来我们就要去界面中使用它们了

首先,倒入我们所需要的文件:

详解vue 组件之间使用eventbus传值

这里我使用的是谈transimissionone还有transimissiontwo两个文件‘

接着是定义

详解vue 组件之间使用eventbus传值

其次是使用

详解vue 组件之间使用eventbus传值

最后运行我们的项目,查看下效果

详解vue 组件之间使用eventbus传值

这边主要是交大家使用,所以代码就俘虏在下面,主要是四个文件

transimissionone。vue(发送事件的文件)

<template> 
  <div class="transimission1"> 
  <button @click="get">点击发送数值到eventbus中</button>  
  </div> 
   
</template> 
 
<script> 
  export default { 
    name: "transimission1", 
    methods: { 
      get: function() { 
        console.log("Aaa"); 
        eventBus.$emit('eventBusName', "hellokugou"); 
      } 
    }, 
  } 
</script> 
 
<style> 
 
</style>

其次是transimissiontwo(监听者)

<template> 
  <div class="transimissiontwo"> 
    <button @click="method1">点击console.log出eventbus的信息 
</button> 
  </div> 
</template> 
 
<script> 
  export default { 
    name: "transimissiontwo", 
    methods: { 
      method1: function() { 
        //使用on老监听事件 
        eventBus.$on('eventBusName', function(val) {  
          console.log("这个是用transimissiontwo的val值为:"+val) 
        }) 
      } 
    } 
  } 
</script> 
<style> 
 
</style>

接着是我们的中枢。app。vue中使用

<template> 
  <div id="app"> 
    <click></click> 
  <transimissiontwo></transimissiontwo> 
    <transimissionone></transimissionone> 
  <sendparent @listenertochildevent="getmessagefromchild"></sendparent> 
    <value :locallogo="netlogo"></value> 
    <!--无法监听,说明要在那个组件中--> 
    <button @listenertochildevent="getmessagefromchild">测试能否监听</button> 
    <my_plug_in></my_plug_in> 
    <div class="choose_div"> 
      <ul> 
 
        <li> 
          <router-link to="/foo">foo页面</router-link> 
        </li> 
        <li> 
          <router-link to="/header">header页面</router-link> 
        </li> 
        <li> 
          <router-link to="/hello">hello页面</router-link> 
        </li> 
        <li style="clear: both;list-style: none;"></li> 
      </ul> 
 
    </div> 
 
    <div class="main"> 
      <router-view class="my_router_iew"></router-view> 
    </div> 
    <testmintui></testmintui> 
  </div> 
</template> 
 
<script> 
  import value from './components/value' 
  import click from "./components/click" 
  import my_plug_in from "./components/plug_in" 
  import sendparent from "./components/send_parent" 
  import testmintui from "./components/Test_mint-ui" 
  import transimissiontwo from "./components/transimissiontwo" 
  import transimissionone from "./components/transimissionone" 
 
  export default { 
    name: 'app', 
    data() { 
      return { 
        netlogo: "主页显示信息到组件中" 
      } 
    }, 
    components: { 
      value, 
      click, 
      my_plug_in, 
      sendparent, 
      testmintui, 
      transimissionone, 
    transimissiontwo, 
     
    }, 
    methods: { 
      getmessagefromchild: function(data) { 
        console.log(data); 
      } 
    } 
  } 
</script> 
 
<style> 
  body { 
    background-color: #f8f8ff; 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    color: #2c3e50; 
  } 
   
  ul { 
    width: 12rem; 
  } 
   
  ul li { 
    list-style: none; 
  } 
   
  ul li:not(:last-child) { 
    list-style: none; 
    width: 2rem; 
    margin-left: 0.1rem; 
    margin-right: 0.1rem; 
    float: left; 
    text-align: center; 
    background: #2C3E50; 
    color: white; 
  } 
   
  ul li a { 
    text-decoration: none; 
    font-size: 16px; 
    color: white; 
    line-height: 1rem; 
    text-align: center; 
  } 
   
  ul li:nth-child { 
    list-style: none; 
    clear: both; 
  } 
   
  .choose_div { 
    width: 100%; 
    overflow: scroll; 
  } 
</style>

请无视掉没用的代码。接着就是定义eventbus了

window.eventBus = new Vue();

就这样,很是简单,当然,对于级别的可以使用prop,下回再讲

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 #Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 #Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 #Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 #Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 #Javascript
JS获取当前地理位置的方法
Oct 25 #Javascript
JavaScript 异步调用
Oct 25 #Javascript
You might like
php中计算时间差的几种方法
2009/12/31 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python中的hypot()方法使用简介
2015/05/18 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python 画出来六维图
2019/07/26 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
怎样创建、运行java程序
2014/08/01 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
建筑学推荐信
2013/11/03 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
省文明单位申报材料
2014/05/08 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
教育合作协议范本
2014/10/17 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
员工考勤管理制度
2015/08/06 职场文书
教师节随笔
2015/08/15 职场文书
赞美教师的句子
2019/09/02 职场文书