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方法去傳遞和接收數據消息。

三、數據消息一旦發送，全部註冊了接收該數據消息的地方都會接收到該數據消息。

個人大麥，若是喜歡個人文章請給我一個當心心哦。