首頁 > 文章 > web前端 > 關於Vue EventBus自訂元件事件傳遞的介紹

關於Vue EventBus自訂元件事件傳遞的介紹

不言原創: 2018-06-30 16:40:271383瀏覽

這篇文章主要介紹了Vue EventBus自訂元件事件傳遞，元件化應用程式建置是Vue的特色之一，本文主要介紹EventBus進行資料訊息傳遞，現在分享給大家，也給大家做個參考。

前言

元件化應用程式建置是Vue的特點之一，因此我們在Vue的實際開發過程中會經常需要封裝自訂元件，以提高開發的效率。而元件在大部分情況下並不會孤立的存在，它必然會與父元件和兄弟元件產生資料的交互作用。所以在這裡為大家總結兩種元件資料互動的方式：EventBus和利用Vuex框架進行狀態管理。

我會透過兩種不同的互動方式，它們對於父子元件間資料互動和兄弟元件間資料互動。

由於篇幅關係，本文主要介紹EventBus進行資料訊息傳遞；關於運用Vuex框架進行狀態管理在下一篇文章中介紹。

案例介紹

本章節會有大量的程式碼範例，為了讓讀者閱讀輕鬆，做如下目錄和元件介紹。本章節主要運用了兩個子組件和一個父組件。

子元件檔名：SearchInput.vue 和SearchItem.vue

父元件檔名：StateView.vue

#目錄結構展示：

#1、SearchInput.vue

##元件介紹：一個輸入框，它會onInput方法去監聽輸入內容，並呼叫方法，將輸入框內的資料傳遞出去。

程式碼展示：

<template>
 <p>
 <input placeholder="搜索内容" v-model="searchContent"/>
 </p>
</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>
 <p>
 <search-view></search-view>
 <p>
  <search-item :itemContent="content"/>
  <search-item itemContent="热门搜索2"/>
  <search-item itemContent="热门搜索3"/>
 </p>
 <p>{{content}}</p>

 </p>
</template>

<script type="text/ecmascript-6">
import searchView from &#39;../components/SearchInput.vue&#39;
import searchItem from &#39;../components/SearchItem.vue&#39;

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 &#39;Vue&#39;
export default new Vue()

#在這裡我們new 了一個Vue的實例，並將它輸出。

第二步：子元件透過EventBus傳送資料訊息

<template>
 <p>
 <input placeholder="搜索内容" @input="sendEvent" v-model="searchContent"/> //增加了@input=“sendEvent”，去监听onInput事件，并回调sendEvent方法
 </p>
</template>

<script type="text/ecmascript-6">
 import searchEvent from &#39;../event/SearchEvent&#39;  //导入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>
 <p>
 <search-view></search-view>
 <p>
  <search-item :itemContent="content"/> //通过props去为子组件传递（动态数据：content）数据
  <search-item itemContent="热门搜索2"/> //通过props去为子组件传递（固定数据：热门搜索2）数据
  <search-item itemContent="热门搜索3"/>
 </p>
 <p>{{content}}</p>

 </p>
</template>

<script type="text/ecmascript-6">
import searchView from &#39;../components/SearchInput.vue&#39;
import searchItem from &#39;../components/SearchItem.vue&#39;
import searchEvent from &#39;../event/SearchEvent&#39; //导入EventBus
export default{
 data () {
 return {
  content:"接收输入框的值"
 }
 },
 mounted(){
 /**
  * 在mounted接受数据消息，$on接受两个参数。
  * 第一个参数是消息事件名，应该与发送数据消息的第一个参数相同，否则接收不到数据消息
  * 第二个参数是一个函数，对数据消息事件做处理；该函数带一个参数，则是数据。
  */
 searchEvent.$on(&#39;search&#39;,(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 &#39;../event/SearchEvent&#39; //导入EventBus
 export default{
 data(){
  return{
  content:this.itemContent
  }
 },
 props:{
  itemContent:{
  type:String,
  required:true
  }
 },
 mounted(){
 /**
  * 在mounted接受数据消息，$on接受两个参数。
  * 第一个参数是消息事件名，应该与发送数据消息的第一个参数相同，否则接收不到数据消息
  * 第二个参数是一个函数，对数据消息事件做处理；该函数带一个参数，则是数据。
  */
  searchEvent.$on(&#39;search&#39;,(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、資料訊息一旦發送，所有註冊了接收該資料訊息的地方都會接收到該資料訊息。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

關於Vue EventBus自訂元件事件傳遞的介紹

相關文章