Vue EventBus自定义组件事件传递

Z时代
2024-01-10
分类：综合

前言

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

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

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

案例介绍

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

子组件文件名：SearchInput.vue 和 SearchItem.vue

父组件文件名：StateView.vue

目录结构展示：

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)传递数据；

目录结构展示

效果展示

代码展示：（粗体表示变化部分）

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>