欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

VueEventBus自定義組件事件傳遞

前言

創(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的特點之一，因此我們在Vue的實際開發(fā)過程中會經(jīng)常需要封裝自定義組件，以提高開發(fā)的效率。 而組件在大部分情況下并不會孤立的存在，它必然會與父組件和兄弟組件產(chǎn)生數(shù)據(jù)的交互。所以在這里為大家總結(jié)兩種組件數(shù)據(jù)交互的方式：EventBus和利用Vuex框架進行狀態(tài)管理。

我會通過兩種不同的交互方式，它們對于父子組件間數(shù)據(jù)交互和兄弟組件間數(shù)據(jù)交互。

由于篇幅關(guān)系，本文主要介紹EventBus進行數(shù)據(jù)消息傳遞；關(guān)于運用Vuex框架進行狀態(tài)管理在下一篇文章中介紹。

案例介紹

本章節(jié)會有大量的代碼示例，為了讓讀者閱讀輕松，做如下目錄和組件介紹。本章節(jié)主要運用了兩個子組件和一個父組件。

子組件文件名：SearchInput.vue和 SearchItem.vue

父組件文件名：StateView.vue

目錄結(jié)構(gòu)展示：

Vue EventBus自定義組件事件傳遞

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)容，并進行展示。

代碼示例：

<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)展示

Vue EventBus自定義組件事件傳遞 

效果展示

Vue EventBus自定義組件事件傳遞

代碼展示：（粗體表示變化部分）

 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進行修改值

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進行修改值。

我們可以感受到 SearchInput一發(fā)送數(shù)據(jù)消息，所有注冊接收 search 事件的地方都會接收到數(shù)據(jù)消息

復(fù)盤：

1、父組件給子組件進行數(shù)據(jù)傳遞可以通過 props 進行傳遞。

2、子組件給父組件進行消息傳遞或子組件給兄弟組件進行消息傳遞可以通過EventBus去實例化一個Vue，并通過該實例的 $emit 和 $on 方法去傳遞和接收數(shù)據(jù)消息。

3、數(shù)據(jù)消息一旦發(fā)送，所有注冊了接收該數(shù)據(jù)消息的地方都會接收到該數(shù)據(jù)消息。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標題：VueEventBus自定義組件事件傳遞
網(wǎng)頁地址：http://www.chinadenli.net/article28/pishcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、App設(shè)計、定制網(wǎng)站、全網(wǎng)營銷推廣、移動網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司