前言
創(chuàng)新互聯(lián)建站主營漠河網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),漠河h5成都微信小程序搭建,漠河網(wǎng)站營銷推廣歡迎漠河等地區(qū)企業(yè)咨詢
組件化應(yīng)用構(gòu)建是Vue的特點(diǎn)之一,因此我們在Vue的實(shí)際開發(fā)過程中會(huì)經(jīng)常需要封裝自定義組件,以提高開發(fā)的效率。 而組件在大部分情況下并不會(huì)孤立的存在,它必然會(huì)與父組件和兄弟組件產(chǎn)生數(shù)據(jù)的交互。所以在這里為大家總結(jié)兩種組件數(shù)據(jù)交互的方式:EventBus和利用Vuex框架進(jìn)行狀態(tài)管理。
我會(huì)通過兩種不同的交互方式,它們對(duì)于父子組件間數(shù)據(jù)交互和兄弟組件間數(shù)據(jù)交互。
由于篇幅關(guān)系,本文主要介紹EventBus進(jìn)行數(shù)據(jù)消息傳遞;關(guān)于運(yùn)用Vuex框架進(jìn)行狀態(tài)管理在下一篇文章中介紹。
案例介紹
本章節(jié)會(huì)有大量的代碼示例,為了讓讀者閱讀輕松,做如下目錄和組件介紹。本章節(jié)主要運(yùn)用了兩個(gè)子組件和一個(gè)父組件。
子組件文件名:SearchInput.vue和 SearchItem.vue
父組件文件名:StateView.vue
目錄結(jié)構(gòu)展示:
1、SearchInput.vue
組件介紹:一個(gè)輸入框,它會(huì)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
組件介紹:一個(gè)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其實(shí)就是通過實(shí)例化一個(gè)Vue實(shí)例,然后通過該實(shí)例的 $emit
方法發(fā)送數(shù)據(jù)消息和 $on
方法接收數(shù)據(jù)消息。它適用在子組件發(fā)送消息給父組件或子組件發(fā)送消息給兄弟組件。
我們看下一個(gè)下面案例主要展示了:
1、通過 props
父組件(StateView)去為子組件(SearchItem)傳遞數(shù)據(jù);
2、子組件(SearchInput)通過 EventBus
和父組件(StateView)、兄弟組件(SearchItem)傳遞數(shù)據(jù);
目錄結(jié)構(gòu)展示
效果展示
代碼展示:(粗體表示變化部分)
1、第一步:自定義一個(gè)EventBus(SearchEvent.js)
import Vue from 'Vue' export default new Vue()
在這里我們 new
了一個(gè)Vue的實(shí)例,并將它輸出。
第二步:子組件通過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ù)消息。 * 第一個(gè)參數(shù)為事件名,到時(shí)候我們要通過該事件名去接收數(shù) * 第二個(gè)參數(shù)為數(shù)據(jù)值,如果只有一個(gè)參數(shù),我們可以直接傳遞該參數(shù) * 如果有兩個(gè)及以上的參數(shù),我們可以通過對(duì)象的形式去傳遞。 */ searchEvent.$emit("search",this.searchContent) //多個(gè)參數(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)容有改變時(shí),回調(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去為子組件傳遞(動(dòng)態(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接受兩個(gè)參數(shù)。 * 第一個(gè)參數(shù)是消息事件名,應(yīng)該與發(fā)送數(shù)據(jù)消息的第一個(gè)參數(shù)相同,否則接收不到數(shù)據(jù)消息 * 第二個(gè)參數(shù)是一個(gè)函數(shù),對(duì)數(shù)據(jù)消息事件做處理;該函數(shù)帶一個(gè)參數(shù),則是數(shù)據(jù)。 */ searchEvent.$on('search',(val)=>{ this.content=val; //示例:如果數(shù)據(jù)傳遞的是對(duì)象形式 // 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ù)消息,并對(duì)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接受兩個(gè)參數(shù)。 * 第一個(gè)參數(shù)是消息事件名,應(yīng)該與發(fā)送數(shù)據(jù)消息的第一個(gè)參數(shù)相同,否則接收不到數(shù)據(jù)消息 * 第二個(gè)參數(shù)是一個(gè)函數(shù),對(duì)數(shù)據(jù)消息事件做處理;該函數(shù)帶一個(gè)參數(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ù)消息,并對(duì)content進(jìn)行修改值。
我們可以感受到 SearchInput一發(fā)送數(shù)據(jù)消息,所有注冊接收 search
事件的地方都會(huì)接收到數(shù)據(jù)消息
復(fù)盤:
1、父組件給子組件進(jìn)行數(shù)據(jù)傳遞可以通過 props
進(jìn)行傳遞。
2、子組件給父組件進(jìn)行消息傳遞或子組件給兄弟組件進(jìn)行消息傳遞可以通過EventBus去實(shí)例化一個(gè)Vue,并通過該實(shí)例的 $emit
和 $on
方法去傳遞和接收數(shù)據(jù)消息。
3、數(shù)據(jù)消息一旦發(fā)送,所有注冊了接收該數(shù)據(jù)消息的地方都會(huì)接收到該數(shù)據(jù)消息。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
本文標(biāo)題:VueEventBus自定義組件事件傳遞
網(wǎng)頁地址:http://muchs.cn/article28/pishcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、App設(shè)計(jì)、定制網(wǎng)站、全網(wǎng)營銷推廣、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)