Introduction à la diffusion d'événements de composants personnalisés Vue EventBus

Cet article présente principalement la livraison d'événements de composants personnalisés Vue EventBus. La construction d'applications de composants est l'une des caractéristiques de Vue. Cet article présente principalement EventBus pour la messagerie de données.

Avant-propos

La construction d'applications basées sur des composants est l'une des caractéristiques de Vue, nous devons donc souvent encapsuler des composants personnalisés pendant le processus de développement réel de Vue pour améliorer le développement. efficacité. Dans la plupart des cas, un composant n'existe pas de manière isolée. Il interagira inévitablement avec les composants parents et les composants frères pour générer des données. Nous résumons donc ici deux manières d'interagir avec les données des composants : EventBus et l'utilisation du framework Vuex pour la gestion de l'état.

J'utiliserai deux méthodes d'interaction différentes, à savoir l'interaction de données entre les composants parent et enfant et l'interaction de données entre les composants frères et sœurs.

En raison de contraintes d'espace, cet article présente principalement EventBus pour la messagerie de données ; l'utilisation du framework Vuex pour la gestion des états sera introduite dans le prochain article.

Introduction au cas

Ce chapitre contiendra un grand nombre d'exemples de code Afin de faciliter la lecture des lecteurs, ce qui suit. des introductions de répertoires et de composants sont effectuées. Ce chapitre utilise principalement deux composants enfants et un composant parent.

Nom du fichier du composant enfant : SearchInput.vue et SearchItem.vue

Nom du fichier du composant parent : StateView.vue

Affichage de la structure du répertoire :

1. SearchInput.vue

introduction au composant. : Une zone de saisie, elle utilise la méthode onInput pour surveiller le contenu d'entrée et appelle la méthode pour transmettre les données dans la zone de saisie.

Affichage du code :

<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

Introduction au composant : un span, qui est principalement utilisé pour recevoir Le contenu transmis par le composant parent et le contenu transmis par la zone de saisie du composant frère sont reçus et affichés.

Exemple de code :

<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

Introduction au composant : composant parent, principalement la page d'affichage et le chargement Sous-composant

Exemple de code :

<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>

Texte

EventBus

1. Le composant parent envoie des données au composant enfant Vous pouvez transmettre les données via les props attributs personnalisés définis par le composant enfant

2. . EventBus en fait, cela se fait en instanciant une instance Vue, puis en envoyant des messages de données via la méthode $emit de l'instance et en recevant des messages de données via la méthode $on. Cela s'applique lorsqu'un composant enfant envoie un message à un composant parent ou lorsqu'un composant enfant envoie un message à un composant frère.

Jetons un coup d'œil au cas suivant, qui montre principalement :

1. Transmettez les données au composant enfant (SearchItem) via le composant parent props ( StateView);

2. Le composant enfant (SearchInput) transmet les données au composant parent (StateView) et au composant frère (SearchItem) via EventBus

Affichage de la structure du répertoire

Affichage de l'effet

Affichage du code : (le gras indique les changements )

1. Étape 1 : Personnaliser un EventBus (SearchEvent.js)

import Vue from 'Vue'
export default new Vue()

Ici, nous

créons une instance de Vue et la produisons. new

Étape 2 : Le sous-composant envoie un message de données via 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>

Dans l'exemple ci-dessus, nous avons principalement fait le choses suivantes : 1. Importer EventBus

2. Utilisez

pour surveiller l'événement @input="sendEvent", et lorsqu'il s'avère que le contenu de la zone de saisie a changé, rappelez la méthode onInput et appelez la méthode sendEvent. Le message de données est envoyé EventBus.emit()

La troisième étape est que le composant parent (StateView) et le composant enfant (SearchItem) reçoivent le message de données

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>

Dans l'exemple ci-dessus, nous avons principalement fait les choses suivantes :

1. , nous avons transmis les données via

de SearchItem. props

2. Recevez le message de données du sous-composant (SearchInput) en appelant la méthode

dans le cycle de vie du composant mounted, et modifiez la valeur du contenu EventBus.on()

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>

Dans l'exemple ci-dessus, nous faisons principalement une chose :

En appelant la méthode

dans le cycle de vie du composant mounted Pour recevoir le message de données du sous-composant (SearchInput) et modifier la valeur du contenu. EventBus.on()

On sent que dès que SearchInput envoie un message de données, tous les lieux inscrits pour recevoir l'événement

recevront le message de données search

Revue :

1. Le composant parent peut transmettre des données au composant enfant via props.

2. Lorsqu'un composant enfant transmet un message à un composant parent ou qu'un composant enfant transmet un message à un composant frère, vous pouvez utiliser EventBus pour instancier une Vue et transmettre les $emit et $on. méthodes de l’instance et Réception des messages de données.

3. Une fois le message de données envoyé, tous les lieux enregistrés pour recevoir le message de données recevront le message de données.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la mise en œuvre du framework de commentaires Vue (implémentation du composant parent)

Retour à la mise en œuvre de Vue top backToTop Composants

Introduction à l'utilisation du composant de sélection de région VUE (V-Distpicker)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!