详解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 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
一个简单的js树形菜单
Dec 09 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 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将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python 变量类型详解
2018/10/10 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
网络维护中文求职信
2014/01/03 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
募捐倡议书
2014/04/14 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
工商行政处罚决定书
2015/06/24 职场文书
清明节随笔
2015/08/15 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫