Vue EventBus カスタム コンポーネント イベント配信の概要

この記事では、Vue の特徴の 1 つである EventBus のカスタム コンポーネントのイベント配信を主に紹介します。

はじめに

コンポーネントベースのアプリケーション構築は Vue の特徴の 1 つであるため、開発効率を向上させるために、Vue の実際の開発プロセス中にカスタム コンポーネントをカプセル化する必要があることがよくあります。 ほとんどの場合、コンポーネントは単独で存在するわけではなく、必然的に親コンポーネントや兄弟コンポーネントと相互作用します。そこで、ここでは、コンポーネント データの対話の 2 つの方法、EventBus と状態管理のための Vuex フレームワークの使用についてまとめます。

親コンポーネントと子コンポーネント間のデータ対話と兄弟コンポーネント間のデータ対話という 2 つの異なる対話方法を使用します。

スペースの制約のため、この記事では主にデータ メッセージング用の EventBus を紹介します。状態管理用の Vuex フレームワークの使用については、次の記事で紹介します。

ケースの紹介

この章では、読者が読みやすいように多数のコード例を紹介します。以下のディレクトリとコンポーネントの紹介を行います。この章では主に 2 つの子コンポーネントと 1 つの親コンポーネントを使用します。

サブコンポーネントファイル名:SearchInput.vueおよびSearchItem.vue

親コンポーネントファイル名:StateView.vue

ディレクトリ構造表示:

1. put.v ue

コンポーネントの紹介: 入力ボックス。 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>

SearchItem.vue

コンポーネントの紹介: 主に親コンポーネントによって渡されたコンテンツと兄弟コンポーネントの入力ボックスによって渡されたコンテンツを受け取るために使用されるスパン、およびそれを表示します。

コードサンプル:

<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>
 <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 &#39;../components/SearchInput.vue&#39;
import searchItem from &#39;../components/SearchItem.vue&#39;

export default{
 data () {
 return {
  content:"接收输入框的值"
 }
 },
 components: {
 searchView,
 searchItem
 }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

Text

EventBus1. 親コンポーネントは、子コンポーネントによって定義された props カスタム プロパティを通じてデータを渡すことができます

2. EventBus は実際に Vue インスタンスをインスタンス化します。その後、データ メッセージはインスタンスの $emit メソッドを通じて送信され、$on メソッドを通じて受信されます。これは、子コンポーネントが親コンポーネントにメッセージを送信する場合、または子コンポーネントが兄弟コンポーネントにメッセージを送信する場合に適用されます。 props 自定义属性，去传递数据

2、EventBus其实就是通过实例化一个Vue实例，然后通过该实例的 $emit 方法发送数据消息和 $on 方法接收数据消息。它适用在子组件发送消息给父组件或子组件发送消息给兄弟组件。

我们看下一个下面案例主要展示了：

1、通过 props 父组件(StateView)去为子组件（SearchItem）传递数据；

2、子组件(SearchInput)通过 EventBus 和父组件(StateView)、兄弟组件(SearchItem)传递数据；

目录结构展示

 

效果展示

代码展示：（粗体表示变化部分）

 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 &#39;../event/SearchEvent&#39;  //导入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 &#39;../components/SearchInput.vue&#39;
import searchItem from &#39;../components/SearchItem.vue&#39;
import searchEvent from &#39;../event/SearchEvent&#39; //导入EventBus
export default{
 data () {
 return {
  content:"接收输入框的值"
 }
 },
 mounted(){
 /**
  * 在mounted接受数据消息，$on接受两个参数。
  * 第一个参数是消息事件名，应该与发送数据消息的第一个参数相同，否则接收不到数据消息
  * 第二个参数是一个函数，对数据消息事件做处理；该函数带一个参数，则是数据。
  */
 searchEvent.$on(&#39;search&#39;,(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 &#39;../event/SearchEvent&#39; //导入EventBus
 export default{
 data(){
  return{
  content:this.itemContent
  }
 },
 props:{
  itemContent:{
  type:String,
  required:true
  }
 },
 mounted(){
 /**
  * 在mounted接受数据消息，$on接受两个参数。
  * 第一个参数是消息事件名，应该与发送数据消息的第一个参数相同，否则接收不到数据消息
  * 第二个参数是一个函数，对数据消息事件做处理；该函数带一个参数，则是数据。
  */
  searchEvent.$on(&#39;search&#39;,(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 親コンポーネント (StateView) を介して子コンポーネント (SearchItem) にデータを渡します。子コンポーネント (SearchInput) ) EventBus と親コンポーネント (StateView) および兄弟コンポーネント (SearchItem) を通じてデータを転送します🎜🎜🎜ディレクトリ構造の表示🎜🎜🎜 🎜🎜🎜エフェクト表示🎜🎜🎜🎜🎜🎜コード表示: (太字は変更を示します)🎜🎜🎜🎜1. ステップ 1: EventBus (SearchEvent.js) をカスタマイズします🎜 🎜 🎜🎜rrreee🎜🎜🎜ここで、new で Vue のインスタンスを作成し、出力します。 🎜🎜🎜ステップ 2: サブコンポーネントは EventBus を通じてデータ メッセージを送信します🎜🎜🎜🎜rrreee🎜🎜🎜 上記の例では、主に次のことを行いました。 1. @input= を通じて EventBus🎜🎜 をインポートします。 "sendEvent " onInput イベントをリッスンし、入力ボックスの内容が変更されたことがわかったら、sendEvent メソッドをコールバックして を呼び出します。 >EventBus.emit() データ メッセージを送信するメソッド 🎜🎜🎜ステップ 3 親コンポーネント (StateView) と子コンポーネント (SearchItem) がデータ メッセージを受信します 🎜🎜🎜StateView.vue🎜🎜🎜rrreee🎜🎜🎜上の例では主に次のことを行いました: 🎜🎜1. 親コンポーネントで、SearchItem の props を介してデータを渡しました。 🎜🎜2. コンポーネント mounted ライフサイクルで EventBus.on() メソッドを呼び出して、サブコンポーネント (SearchInput) のデータ メッセージを受信し、コンテンツの値を変更します🎜 🎜 SearchItem.vue🎜🎜🎜rrreee🎜🎜🎜 上記の例では、主に 1 つのことを行っています: 🎜🎜コンポーネント mounted ライフ サイクル > メソッドで EventBus.on()を呼び出すことによってサブコンポーネント (SearchInput) のデータ メッセージを受信し、コンテンツの値を変更します。 🎜🎜SearchInput がデータ メッセージを送信するとすぐに、search イベントを受信するように登録されているすべての場所がデータ メッセージを受信することがわかります🎜🎜🎜レビュー: 🎜🎜

1. 親コンポーネントは、props を通じて子コンポーネントにデータを渡すことができます。 props 进行传递。

2、子组件给父组件进行消息传递或子组件给兄弟组件进行消息传递可以通过EventBus去实例化一个Vue，并通过该实例的 $emit 和 $on

2. 子コンポーネントが親コンポーネントにメッセージを送信するとき、または子コンポーネントが兄弟コンポーネントにメッセージを送信するとき、EventBus を使用して Vue をインスタンス化し、インスタンスの $emit と $on メソッドを使用してデータ メッセージを送受信します。

3. データメッセージが送信されると、データメッセージを受信するように登録されているすべての場所がデータメッセージを受信します。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Vue コメント フレームワークの実装 (親コンポーネントの実装) について

Vue は、トップ backToTop を返すコンポーネントを実装します

VUE 領域セレクター (V) について-Distpicker)コンポーネントの使い方の紹介

🎜

以上がVue EventBus カスタム コンポーネント イベント配信の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。