详解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 相关文章推荐
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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中this,self,parent的区别详解
2013/06/08 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
alert中断settimeout计时功能
2013/07/26 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
python super()函数的基本使用
2020/09/10 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
相亲活动方案
2014/08/26 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
Java中API的使用方法详情
2022/04/06 Java/Android