Vue自定义组件事件传递：EventBus部分

前言

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

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

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

Vuex框架介绍：Vuex入门教程

案例介绍

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

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

父组件文件名：StateView.vue

目录结构展现：

一、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

一、父组件发送数据给子组件，能够经过子组件定义的props自定义属性，去传递数据

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

咱们看下一个下面案例主要展现了：

一、经过props父组件(StateView)去为子组件（SearchItem）传递数据；

二、子组件(SearchInput)经过EventBus和父组件(StateView)、兄弟组件(SearchItem)传递数据；

目录结构展现

效果展现

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

一、第一步：自定义一个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>

复制代码

在上面的示例咱们主要作了如下事情： 一、导入EventBus

二、经过@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>

复制代码

在上面的示例咱们主要作了如下事情：

一、在父组件，咱们经过SearchItem的props去传递了数据。

二、经过在组件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事件的地方都会接收到数据消息

复盘：

一、父组件给子组件进行数据传递能够经过props进行传递。

二、子组件给父组件进行消息传递或子组件给兄弟组件进行消息传递能够经过EventBus去实例化一个Vue，并经过该实例的$emit和$on方法去传递和接收数据消息。

三、数据消息一旦发送，全部注册了接收该数据消息的地方都会接收到该数据消息。

个人大麦，若是喜欢个人文章请给我一个当心心哦。