Vue EventBus自定义组件事件传递


Posted in Javascript onJune 25, 2018

前言

组件化应用构建是Vue的特点之一,因此我们在Vue的实际开发过程中会经常需要封装自定义组件,以提高开发的效率。 而组件在大部分情况下并不会孤立的存在,它必然会与父组件和兄弟组件产生数据的交互。所以在这里为大家总结两种组件数据交互的方式:EventBus和利用Vuex框架进行状态管理。

我会通过两种不同的交互方式,它们对于父子组件间数据交互和兄弟组件间数据交互。

由于篇幅关系,本文主要介绍EventBus进行数据消息传递;关于运用Vuex框架进行状态管理在下一篇文章中介绍。

案例介绍

本章节会有大量的代码示例,为了让读者阅读轻松,做如下目录和组件介绍。本章节主要运用了两个子组件和一个父组件。

子组件文件名:SearchInput.vueSearchItem.vue

父组件文件名:StateView.vue

目录结构展示:

Vue EventBus自定义组件事件传递

1、SearchInput.vue

组件介绍:一个输入框,它会onInput方法去监听输入内容,并调用方法,将输入框内的数据传递出去。

代码展示:

<template>
 <div>
 <input placeholder="搜索内容" v-model="searchContent"/>
 </div>
</template>

<script type="text/ecmascript-6">
 export default{
 data(){
  return{
  searchContent:""
  }
 },
 props:{

 }
 }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

SearchItem.vue

组件介绍:一个span,它主要用来接收父组件传递的内容和接收同胞组件输入框传递的内容,并进行展示。

代码示例:

<template>
 <span class="item">
  {{content}}
 </span>
</template>

<script type="text/ecmascript-6">
 export default{
 data(){
  return{
  content:this.itemContent
  }
 },
 props:{
  itemContent:{
  type:String,
  required:true
  }
 }
 }
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .item
 background #f4f4f4
 padding 3px 5px
 box-sizing border-box
 display inline-block
 cursor pointer
</style>

StateView.vue

组件介绍:父组件,主要展示页面和加载子组件

代码示例:

<template>
 <div>
 <search-view></search-view>
 <div>
  <search-item :itemContent="content"/>
  <search-item itemContent="热门搜索2"/>
  <search-item itemContent="热门搜索3"/>
 </div>
 <div>{{content}}</div>

 </div>
</template>

<script type="text/ecmascript-6">
import searchView from '../components/SearchInput.vue'
import searchItem from '../components/SearchItem.vue'

export default{
 data () {
 return {
  content:"接收输入框的值"
 }
 },
 components: {
 searchView,
 searchItem
 }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

正文

EventBus

1、父组件发送数据给子组件,可以通过子组件定义的 props 自定义属性,去传递数据

2、EventBus其实就是通过实例化一个Vue实例,然后通过该实例的 $emit 方法发送数据消息和 $on 方法接收数据消息。它适用在子组件发送消息给父组件或子组件发送消息给兄弟组件。

我们看下一个下面案例主要展示了:

1、通过 props 父组件(StateView)去为子组件(SearchItem)传递数据;

2、子组件(SearchInput)通过 EventBus 和父组件(StateView)、兄弟组件(SearchItem)传递数据;

目录结构展示

Vue EventBus自定义组件事件传递 

效果展示

Vue EventBus自定义组件事件传递

代码展示:(粗体表示变化部分)

 1、第一步:自定义一个EventBus(SearchEvent.js)

import Vue from 'Vue'
export default new Vue()

在这里我们 new 了一个Vue的实例,并将它输出。

第二步:子组件通过EventBus发送数据消息

<template>
 <div>
 <input placeholder="搜索内容" @input="sendEvent" v-model="searchContent"/> //增加了@input=“sendEvent”,去监听onInput事件,并回调sendEvent方法
 </div>
</template>

<script type="text/ecmascript-6">
 import searchEvent from '../event/SearchEvent'  //导入EventBus
 export default{
 data(){
  return{
  searchContent:""
  }
 },
 methods:{
  sendEvent:function(){  //定义sendEvent方法,在input中监听onInput,并回调该方法
   /**
   * 通过导入的searchEvent调用$emit方法去发送数据消息。
   * 第一个参数为事件名,到时候我们要通过该事件名去接收数
   * 第二个参数为数据值,如果只有一个参数,我们可以直接传递该参数
   * 如果有两个及以上的参数,我们可以通过对象的形式去传递。
   */
  searchEvent.$emit("search",this.searchContent)
  //多个参数传递的示例:
  //searchEvent.$emit("search",{"content":this.searchContent,"valTwo":"valTow"})
  }
 },
 props:{

 }
 }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

在上面的示例我们主要做了以下事情: 1、导入EventBus

2、通过 @input="sendEvent" 去监听 onInput 事件,并发现输入框内内容有改变时,回调 sendEvent 方法,调用 EventBus.emit() 方法把数据消息发送出去

第三步父组件(StateView)和子组件(SearchItem)接收数据消息

StateView.vue

<template>
 <div>
 <search-view></search-view>
 <div>
  <search-item :itemContent="content"/> //通过props去为子组件传递(动态数据:content)数据
  <search-item itemContent="热门搜索2"/> //通过props去为子组件传递(固定数据:热门搜索2)数据
  <search-item itemContent="热门搜索3"/>
 </div>
 <div>{{content}}</div>

 </div>
</template>

<script type="text/ecmascript-6">
import searchView from '../components/SearchInput.vue'
import searchItem from '../components/SearchItem.vue'
import searchEvent from '../event/SearchEvent' //导入EventBus
export default{
 data () {
 return {
  content:"接收输入框的值"
 }
 },
 mounted(){
 /**
  * 在mounted接受数据消息,$on接受两个参数。
  * 第一个参数是消息事件名,应该与发送数据消息的第一个参数相同,否则接收不到数据消息
  * 第二个参数是一个函数,对数据消息事件做处理;该函数带一个参数,则是数据。
  */
 searchEvent.$on('search',(val)=>{
  this.content=val;
  //示例:如果数据传递的是对象形式
  // this.content=val.content;
 })
 },
 components: {
 searchView,
 searchItem
 }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

在上面的示例我们主要做了以下事情:

1、在父组件,我们通过SearchItem的 props 去传递了数据。

2、通过在组件 mounted 生命周期中调用 EventBus.on() 方法去接收子组件(SearchInput)的数据消息,并对content进行修改值

SearchItem.vue

<template>
 <span class="item">
  {{content}}
 </span>
</template>

<script type="text/ecmascript-6">
 import searchEvent from '../event/SearchEvent' //导入EventBus
 export default{
 data(){
  return{
  content:this.itemContent
  }
 },
 props:{
  itemContent:{
  type:String,
  required:true
  }
 },
 mounted(){
 /**
  * 在mounted接受数据消息,$on接受两个参数。
  * 第一个参数是消息事件名,应该与发送数据消息的第一个参数相同,否则接收不到数据消息
  * 第二个参数是一个函数,对数据消息事件做处理;该函数带一个参数,则是数据。
  */
  searchEvent.$on('search',(val)=>{
  this.content=val;
  })
 }
 }
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .item
 background #f4f4f4
 padding 3px 5px
 box-sizing border-box
 display inline-block
 cursor pointer
</style>

在上面的示例我们主要做了一事情:

通过在组件 mounted 生命周期中调用 EventBus.on() 方法去接收子组件(SearchInput)的数据消息,并对content进行修改值。

我们可以感受到 SearchInput一发送数据消息,所有注册接收 search 事件的地方都会接收到数据消息

复盘:

1、父组件给子组件进行数据传递可以通过 props 进行传递。

2、子组件给父组件进行消息传递或子组件给兄弟组件进行消息传递可以通过EventBus去实例化一个Vue,并通过该实例的 $emit$on 方法去传递和接收数据消息。

3、数据消息一旦发送,所有注册了接收该数据消息的地方都会接收到该数据消息。

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

Javascript 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
vue之debounce属性被移除及处理详解
Nov 13 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 #Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 #Javascript
angularjs结合html5实现拖拽功能
Jun 25 #Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 #Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 #Javascript
JS的函数调用栈stack size的计算方法
Jun 24 #Javascript
JavaScript中var、let、const区别浅析
Jun 24 #Javascript
You might like
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
CI框架附属类用法分析
2018/12/26 PHP
Jquery中删除元素的实现代码
2011/12/29 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
给分销商的致歉信
2014/01/14 职场文书
创先争优制度
2014/01/21 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
通报表扬范文
2015/01/17 职场文书
贷款担保书
2015/01/20 职场文书
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android