欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue EventBus自定義組件事件傳遞

 更新時(shí)間:2018年06月25日 09:24:42   作者:丨大麥  
這篇文章主要介紹了Vue EventBus自定義組件事件傳遞,組件化應(yīng)用構(gòu)建是Vue的特點(diǎn)之一,本文主要介紹EventBus進(jìn)行數(shù)據(jù)消息傳遞 ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

前言

組件化應(yīng)用構(gòu)建是Vue的特點(diǎn)之一,因此我們?cè)赩ue的實(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.vueSearchItem.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,它主要用來(lái)接收父組件傳遞的內(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

組件介紹:父組件,主要展示頁(yè)面和加載子組件

代碼示例:

<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ù)消息,所有注冊(cè)接收 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ā)送,所有注冊(cè)了接收該數(shù)據(jù)消息的地方都會(huì)接收到該數(shù)據(jù)消息。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案

    vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案

    這篇文章主要介紹了vue中swiper開啟loop后,點(diǎn)擊事件不響應(yīng)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue利用openlayers實(shí)現(xiàn)點(diǎn)擊彈窗的方法詳解

    Vue利用openlayers實(shí)現(xiàn)點(diǎn)擊彈窗的方法詳解

    點(diǎn)擊彈窗其實(shí)就是添加一個(gè)彈窗圖層,然后在點(diǎn)擊的時(shí)候讓他顯示出來(lái)罷了。本文將利用openlayers實(shí)現(xiàn)這一效果,快跟隨小編一起學(xué)習(xí)一下吧
    2022-06-06
  • Vue 3 + Element Plus樹形表格全選多選及子節(jié)點(diǎn)勾選的問題解決方法

    Vue 3 + Element Plus樹形表格全選多選及子節(jié)點(diǎn)勾選的問題解決方

    在本文中,我們解決了Vue 3和Element Plus樹形表格中的全選、多選、子節(jié)點(diǎn)勾選和父節(jié)點(diǎn)勾選等常見問題,通過逐步實(shí)現(xiàn)這些功能,您可以構(gòu)建功能強(qiáng)大且用戶友好的樹形表格組件,以滿足各種數(shù)據(jù)展示需求,對(duì)Vue 3 Element Plus樹形表格相關(guān)知識(shí)感興趣的朋友一起看看吧
    2023-12-12
  • 35個(gè)最好用的Vue開源庫(kù)(史上最全)

    35個(gè)最好用的Vue開源庫(kù)(史上最全)

    無(wú)論是開發(fā)新手還是經(jīng)驗(yàn)豐富的老手,我們都喜歡開源軟件包。本文主要介紹了35個(gè)最好用的Vue開源庫(kù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-01-01
  • 詳解Vue組件之作用域插槽

    詳解Vue組件之作用域插槽

    這篇文章主要介紹了Vue組件之作用域插槽,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-11-11
  • Vue實(shí)現(xiàn)遞歸組件的思路與示例代碼

    Vue實(shí)現(xiàn)遞歸組件的思路與示例代碼

    以簡(jiǎn)單的樹形組件為案例,實(shí)現(xiàn)在組件中遞歸組件,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)遞歸組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • vue3的setup語(yǔ)法糖簡(jiǎn)單封裝ckediter的過程

    vue3的setup語(yǔ)法糖簡(jiǎn)單封裝ckediter的過程

    Vue3官方提供了 script setup 語(yǔ)法糖,只需在script標(biāo)簽中添加setup,組件只需引入不用注冊(cè),屬性和方法也不用返回,今天通過本文給大家分享vue3的setup語(yǔ)法糖簡(jiǎn)單封裝ckediter的過程,感興趣的朋友一起看看吧
    2023-10-10
  • Vue封裝組件利器之$attrs、$listeners的使用

    Vue封裝組件利器之$attrs、$listeners的使用

    vue通信手段有很多種,props/emit、vuex、event bus、provide/inject等,還有一種通信方式,那就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于Vue封裝組件利器之$attrs、$listeners使用的相關(guān)資料,需要的朋友可以參考下
    2021-12-12
  • 解決Vue項(xiàng)目中Emitted value instead of an instance of Error問題

    解決Vue項(xiàng)目中Emitted value instead of an 

    這篇文章主要介紹了解決Vue項(xiàng)目中Emitted value instead of an instance of Error問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue3.0+element表格獲取每行數(shù)據(jù)代碼示例

    vue3.0+element表格獲取每行數(shù)據(jù)代碼示例

    這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過為表格的行綁定單擊事件來(lái)獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下
    2023-09-09

最新評(píng)論