這篇文章主要介紹了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><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><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 '../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
2、子元件(SearchInput)透過EventBus
##目錄結構展示
效果展示
程式展示：（粗體表示變化部分）
1、第一步：自訂一個EventBus（SearchEvent.js）
import Vue from 'Vue' 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 '../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>
<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 '../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、資料訊息一旦發送，所有註冊了接收該資料訊息的地方都會接收到該資料訊息。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
關於VUE-地區選擇器(V-Distpicker)元件的使用介紹
#
以上是關於Vue EventBus自訂元件事件傳遞的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
