详解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跨域刷新实现代码
Jan 01 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
Angular6笔记之封装http的示例代码
Jul 27 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
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 socke 向指定页面提交数据
2008/07/23 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
php修改数组键名的方法示例
2017/04/15 PHP
php桥接模式应用案例分析
2019/10/23 PHP
jquery 插件开发备注
2010/08/27 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
浅析return false的正确使用
2013/11/04 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
Django如何配置mysql数据库
2018/05/04 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
自荐信模版
2013/10/24 职场文书
上班上网检讨书
2014/01/29 职场文书
干部作风建设心得体会
2014/10/22 职场文书
2014年居委会工作总结
2014/12/09 职场文书
优秀护士事迹材料
2014/12/25 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python