Vue EventBus自定義組件事件傳遞
前言
組件化應(yīng)用構(gòu)建是Vue的特點之一，因此我們在Vue的實際開發(fā)過程中會經(jīng)常需要封裝自定義組件，以提高開發(fā)的效率。 而組件在大部分情況下并不會孤立的存在，它必然會與父組件和兄弟組件產(chǎn)生數(shù)據(jù)的交互。所以在這里為大家總結(jié)兩種組件數(shù)據(jù)交互的方式：EventBus和利用Vuex框架進(jìn)行狀態(tài)管理。
我會通過兩種不同的交互方式，它們對于父子組件間數(shù)據(jù)交互和兄弟組件間數(shù)據(jù)交互。
由于篇幅關(guān)系，本文主要介紹EventBus進(jìn)行數(shù)據(jù)消息傳遞；關(guān)于運用Vuex框架進(jìn)行狀態(tài)管理在下一篇文章中介紹。
案例介紹
本章節(jié)會有大量的代碼示例，為了讓讀者閱讀輕松，做如下目錄和組件介紹。本章節(jié)主要運用了兩個子組件和一個父組件。
子組件文件名：SearchInput.vue 和 SearchItem.vue
父組件文件名：StateView.vue
目錄結(jié)構(gòu)展示：
1、SearchInput.vue
組件介紹：一個輸入框，它會onInput方法去監(jiān)聽輸入內(nèi)容，并調(diào)用方法，將輸入框內(nèi)的數(shù)據(jù)傳遞出去。
代碼展示：
<template>
<div>
<input placeholder="搜索內(nèi)容" 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，它主要用來接收父組件傳遞的內(nèi)容和接收同胞組件輸入框傳遞的內(nèi)容，并進(jìn)行展示。
代碼示例：
<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、父組件發(fā)送數(shù)據(jù)給子組件，可以通過子組件定義的 props 自定義屬性，去傳遞數(shù)據(jù)
2、EventBus其實就是通過實例化一個Vue實例，然后通過該實例的 $emit 方法發(fā)送數(shù)據(jù)消息和 $on 方法接收數(shù)據(jù)消息。它適用在子組件發(fā)送消息給父組件或子組件發(fā)送消息給兄弟組件。
我們看下一個下面案例主要展示了：
1、通過 props 父組件(StateView)去為子組件（SearchItem）傳遞數(shù)據(jù)；
2、子組件(SearchInput)通過 EventBus 和父組件(StateView)、兄弟組件(SearchItem)傳遞數(shù)據(jù)；
目錄結(jié)構(gòu)展示
效果展示
代碼展示：（粗體表示變化部分）
1、第一步：自定義一個EventBus（SearchEvent.js）
import Vue from 'Vue' export default new Vue()
在這里我們 new 了一個Vue的實例，并將它輸出。
第二步：子組件通過EventBus發(fā)送數(shù)據(jù)消息
<template>
<div>
<input placeholder="搜索內(nèi)容" @input="sendEvent" v-model="searchContent"/> //增加了@input=“sendEvent”，去監(jiān)聽onInput事件，并回調(diào)sendEvent方法
</div>
</template>
<script type="text/ecmascript-6">
import searchEvent from '../event/SearchEvent' //導(dǎo)入EventBus
export default{
data(){
return{
searchContent:""
}
},
methods:{
sendEvent:function(){ //定義sendEvent方法，在input中監(jiān)聽onInput，并回調(diào)該方法
/**
* 通過導(dǎo)入的searchEvent調(diào)用$emit方法去發(fā)送數(shù)據(jù)消息。
* 第一個參數(shù)為事件名，到時候我們要通過該事件名去接收數(shù)
* 第二個參數(shù)為數(shù)據(jù)值，如果只有一個參數(shù)，我們可以直接傳遞該參數(shù)
* 如果有兩個及以上的參數(shù)，我們可以通過對象的形式去傳遞。
*/
searchEvent.$emit("search",this.searchContent)
//多個參數(shù)傳遞的示例：
//searchEvent.$emit("search",{"content":this.searchContent,"valTwo":"valTow"})
}
},
props:{
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
在上面的示例我們主要做了以下事情： 1、導(dǎo)入EventBus
2、通過 @input="sendEvent" 去監(jiān)聽 onInput 事件，并發(fā)現(xiàn)輸入框內(nèi)內(nèi)容有改變時，回調(diào) sendEvent 方法，調(diào)用 EventBus.emit() 方法把數(shù)據(jù)消息發(fā)送出去
第三步父組件(StateView)和子組件(SearchItem)接收數(shù)據(jù)消息
StateView.vue
<template>
<div>
<search-view></search-view>
<div>
<search-item :itemContent="content"/> //通過props去為子組件傳遞（動態(tài)數(shù)據(jù)：content）數(shù)據(jù)
<search-item itemContent="熱門搜索2"/> //通過props去為子組件傳遞（固定數(shù)據(jù)：熱門搜索2）數(shù)據(jù)
<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' //導(dǎo)入EventBus
export default{
data () {
return {
content:"接收輸入框的值"
}
},
mounted(){
/**
* 在mounted接受數(shù)據(jù)消息，$on接受兩個參數(shù)。
* 第一個參數(shù)是消息事件名，應(yīng)該與發(fā)送數(shù)據(jù)消息的第一個參數(shù)相同，否則接收不到數(shù)據(jù)消息
* 第二個參數(shù)是一個函數(shù)，對數(shù)據(jù)消息事件做處理；該函數(shù)帶一個參數(shù)，則是數(shù)據(jù)。
*/
searchEvent.$on('search',(val)=>{
this.content=val;
//示例：如果數(shù)據(jù)傳遞的是對象形式
// this.content=val.content;
})
},
components: {
searchView,
searchItem
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>
在上面的示例我們主要做了以下事情：
1、在父組件，我們通過SearchItem的 props 去傳遞了數(shù)據(jù)。
2、通過在組件 mounted 生命周期中調(diào)用 EventBus.on() 方法去接收子組件（SearchInput）的數(shù)據(jù)消息，并對content進(jìn)行修改值
SearchItem.vue
<template>
<span class="item">
{{content}}
</span>
</template>
<script type="text/ecmascript-6">
import searchEvent from '../event/SearchEvent' //導(dǎo)入EventBus
export default{
data(){
return{
content:this.itemContent
}
},
props:{
itemContent:{
type:String,
required:true
}
},
mounted(){
/**
* 在mounted接受數(shù)據(jù)消息，$on接受兩個參數(shù)。
* 第一個參數(shù)是消息事件名，應(yīng)該與發(fā)送數(shù)據(jù)消息的第一個參數(shù)相同，否則接收不到數(shù)據(jù)消息
* 第二個參數(shù)是一個函數(shù)，對數(shù)據(jù)消息事件做處理；該函數(shù)帶一個參數(shù)，則是數(shù)據(jù)。
*/
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 生命周期中調(diào)用 EventBus.on() 方法去接收子組件（SearchInput）的數(shù)據(jù)消息，并對content進(jìn)行修改值。
我們可以感受到 SearchInput一發(fā)送數(shù)據(jù)消息，所有注冊接收 search 事件的地方都會接收到數(shù)據(jù)消息
復(fù)盤：
1、父組件給子組件進(jìn)行數(shù)據(jù)傳遞可以通過 props 進(jìn)行傳遞。
2、子組件給父組件進(jìn)行消息傳遞或子組件給兄弟組件進(jìn)行消息傳遞可以通過EventBus去實例化一個Vue，并通過該實例的 $emit 和 $on 方法去傳遞和接收數(shù)據(jù)消息。
3、數(shù)據(jù)消息一旦發(fā)送，所有注冊了接收該數(shù)據(jù)消息的地方都會接收到該數(shù)據(jù)消息。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中swiper開啟loop后,點擊事件不響應(yīng)的解決方案
這篇文章主要介紹了vue中swiper開啟loop后,點擊事件不響應(yīng)的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue利用openlayers實現(xiàn)點擊彈窗的方法詳解
點擊彈窗其實就是添加一個彈窗圖層，然后在點擊的時候讓他顯示出來罷了。本文將利用openlayers實現(xiàn)這一效果，快跟隨小編一起學(xué)習(xí)一下吧2022-06-06
Vue 3 + Element Plus樹形表格全選多選及子節(jié)點勾選的問題解決方
在本文中,我們解決了Vue 3和Element Plus樹形表格中的全選、多選、子節(jié)點勾選和父節(jié)點勾選等常見問題,通過逐步實現(xiàn)這些功能,您可以構(gòu)建功能強(qiáng)大且用戶友好的樹形表格組件,以滿足各種數(shù)據(jù)展示需求,對Vue 3 Element Plus樹形表格相關(guān)知識感興趣的朋友一起看看吧2023-12-12
無論是開發(fā)新手還是經(jīng)驗豐富的老手，我們都喜歡開源軟件包。本文主要介紹了35個最好用的Vue開源庫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了Vue組件之作用域插槽，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
以簡單的樹形組件為案例,實現(xiàn)在組件中遞歸組件,下面這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)遞歸組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue3官方提供了 script setup 語法糖,只需在script標(biāo)簽中添加setup,組件只需引入不用注冊,屬性和方法也不用返回,今天通過本文給大家分享vue3的setup語法糖簡單封裝ckediter的過程,感興趣的朋友一起看看吧2023-10-10
Vue封裝組件利器之$attrs、$listeners的使用
vue通信手段有很多種,props/emit、vuex、event bus、provide/inject等,還有一種通信方式,那就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于Vue封裝組件利器之$attrs、$listeners使用的相關(guān)資料,需要的朋友可以參考下2021-12-12
解決Vue項目中Emitted value instead of an
這篇文章主要介紹了解決Vue項目中Emitted value instead of an instance of Error問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過為表格的行綁定單擊事件來獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下2023-09-09