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 相关文章推荐
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
详解http访问解析流程原理
Oct 18 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
react 创建单例组件的方法
Apr 26 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
javascript绘制简单钟表效果
Apr 07 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
学习php过程中的一些注意点的总结
2013/10/25 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python并发和异步编程实例
2018/11/15 Python
django session完成状态保持的方法
2018/11/27 Python
python实现三次样条插值
2018/12/17 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
python 读取二进制 显示图片案例
2020/04/24 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
荷兰超市:DEEN
2018/03/14 全球购物
纪检干部现实表现材料
2014/08/21 职场文书
廉政教育的心得体会
2014/09/01 职场文书
公司股东合作协议书
2014/09/14 职场文书
合作协议书模板
2014/10/10 职场文书
前台接待岗位职责范本
2015/04/03 职场文书