详解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 相关文章推荐
Javascript 刷新全集常用代码
Nov 22 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
vant自定义二级菜单操作
Nov 02 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 file_exists无效的解决办法
2013/06/26 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
浅谈Python中的闭包
2015/07/08 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
Python celery原理及运行流程解析
2020/06/13 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
文明礼仪伴我行演讲稿
2014/05/12 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
文明好少年事迹材料
2014/08/19 职场文书
2014年优秀党员材料
2014/12/18 职场文书
建党伟业的观后感
2015/06/01 职场文书
python基础之文件处理知识总结
2021/05/23 Python
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电