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基础整理1
Dec 06 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
javascript基础知识
Jun 07 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
python2.7的编码问题与解决方法
2016/10/04 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python模块相关知识点小结
2020/03/09 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
维修工先进事迹
2014/05/29 职场文书
新郎答谢词
2015/01/04 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs