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效率调优经验
Jun 04 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
一个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代码实现表单数据验证类
2015/07/28 PHP
Symfony生成二维码的方法
2016/02/04 PHP
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python解决八皇后问题示例
2018/04/22 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
python爬取抖音视频的实例分析
2021/01/19 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
康拓普公司Java笔面试
2016/09/23 面试题
移动通信行业实习自我鉴定
2013/09/28 职场文书
会计专业自我鉴定
2014/02/10 职场文书
会计专业自荐信
2014/06/03 职场文书
质量标语大全
2014/06/12 职场文书
会计人员演讲稿
2014/09/11 职场文书
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS