Einführung in die Bereitstellung benutzerdefinierter Komponentenereignisse von Vue EventBus

In diesem Artikel wird hauptsächlich die Bereitstellung benutzerdefinierter Komponentenereignisse von Vue vorgestellt. In diesem Artikel wird hauptsächlich EventBus für die Datenübermittlung vorgestellt.

Vorwort

Komponentenbasierte Anwendungskonstruktion ist eines der Merkmale von Vue, daher müssen wir während des eigentlichen Entwicklungsprozesses von Vue häufig benutzerdefinierte Komponenten kapseln, um die Entwicklung zu verbessern Effizienz. In den meisten Fällen existiert eine Komponente nicht isoliert. Sie interagiert zwangsläufig mit übergeordneten Komponenten und Geschwisterkomponenten. Daher fassen wir hier zwei Möglichkeiten der Komponentendateninteraktion zusammen: EventBus und die Verwendung des Vuex-Frameworks für die Zustandsverwaltung.

Ich werde zwei verschiedene Interaktionsmethoden verwenden, nämlich die Dateninteraktion zwischen übergeordneten und untergeordneten Komponenten und die Dateninteraktion zwischen Geschwisterkomponenten.

Aus Platzgründen wird in diesem Artikel hauptsächlich EventBus für die Datennachrichten vorgestellt. Die Verwendung des Vuex-Frameworks für die Statusverwaltung wird im nächsten Artikel vorgestellt.

Falleinführung

Dieses Kapitel enthält eine große Anzahl von Codebeispielen, um den Lesern das Lesen zu erleichtern Verzeichnis- und Komponenteneinführungen werden vorgenommen. In diesem Kapitel werden hauptsächlich zwei untergeordnete Komponenten und eine übergeordnete Komponente verwendet.

Dateiname der untergeordneten Komponente: SearchInput.vue und SearchItem.vue

Dateiname der übergeordneten Komponente: StateView.vue

Anzeige der Verzeichnisstruktur:

1. SearchInput.vue

Komponenteneinführung : Ein Eingabefeld, das die onInput-Methode verwendet, um den Eingabeinhalt zu überwachen, und die Methode aufruft, um die Daten im Eingabefeld zu übergeben.

Codeanzeige:

<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

Komponenteneinführung: eine Spanne, die hauptsächlich zum Empfangen von übergeordneten Elementen verwendet wird Komponenten Der übergebene Inhalt und der vom Eingabefeld der Geschwisterkomponente übergebene Inhalt werden empfangen und angezeigt.

Codebeispiel:

<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

Komponenteneinführung: übergeordnete Komponente, zeigt hauptsächlich Seiten an und lädt untergeordnete Komponenten

Codebeispiel:

<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

EventBus

1. Die übergeordnete Komponente sendet Daten über das von der untergeordneten Komponente definierte props

2 Tatsächlich wird eine Vue-Instanz instanziiert und dann Datennachrichten gesendet und Datennachrichten über die

-Methode der Instanz empfangen. Dies ist anwendbar, wenn eine untergeordnete Komponente eine Nachricht an eine übergeordnete Komponente sendet oder wenn eine untergeordnete Komponente eine Nachricht an eine Geschwisterkomponente sendet. $emit$on

Schauen wir uns den folgenden Fall an, der hauptsächlich zeigt:

1 Übergeben Sie Daten an die untergeordnete Komponente (SearchItem) über die

übergeordnete Komponente (. StateView);

props2. Die untergeordnete Komponente (SearchInput) übergibt Daten an die übergeordnete Komponente (StateView) und die Geschwisterkomponente (SearchItem) über

EventBusVerzeichnisstrukturanzeige

Effektanzeige

Codeanzeige: (Fett zeigt Änderungen an )

1. Schritt 1: Passen Sie einen EventBus an (SearchEvent.js)

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

Hier sind wir sind

Erstellen Sie eine Instanz von Vue und geben Sie sie aus.

newSchritt 2: Unterkomponente sendet Datennachricht über 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>

Im obigen Beispiel haben wir hauptsächlich Folgendes getan Folgende Dinge: 1. EventBus importieren

2. Verwenden Sie

, um das

-Ereignis zu überwachen. Wenn festgestellt wird, dass sich der Inhalt im Eingabefeld geändert hat, rufen Sie die

-Methode zurück und Rufen Sie die Methode @input="sendEvent" auf, um die Daten zu senden. Senden Sie onInputsendEventEventBus.emit()Schritt 3. Die übergeordnete Komponente (StateView) und die untergeordnete Komponente (SearchItem) empfangen Datennachrichten

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>

Im obigen Beispiel haben wir hauptsächlich die folgenden Dinge getan:

1. In der übergeordneten Komponente haben wir die Daten über SearchItems übergeben

.

2. Empfangen Sie die Datennachricht der Unterkomponente (SearchInput), indem Sie die Methode props im Lebenszyklus der Komponente

aufrufen und den Inhaltswert

mountedSearchItem.vue<🎜 ändern >EventBus.on()

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

Im obigen Beispiel machen wir hauptsächlich eines:

Empfangen durch Aufrufen der

Methode im Komponenten-

Lebenszyklus Datennachricht der Unterkomponente (SearchInput) und ändern Sie den Inhaltswert.

Wir können spüren, dass, sobald SearchInput eine Datennachricht sendet, alle Orte, die für den Empfang des mounted-Ereignisses registriert sind, die Datennachricht erhalten EventBus.on()

Bewertung: search

1. Die übergeordnete Komponente kann über props Daten an die untergeordnete Komponente weitergeben.

2. Wenn eine untergeordnete Komponente eine Nachricht an eine übergeordnete Komponente oder eine untergeordnete Komponente eine Nachricht an eine Geschwisterkomponente übergibt, können Sie EventBus verwenden, um einen Vue zu instanziieren und $emit und $on zu übergeben Methoden der Instanz und Empfangsdatennachrichten.

3. Sobald die Datennachricht gesendet wurde, erhalten alle Orte, die für den Empfang der Datennachricht registriert sind, die Datennachricht.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Über die Implementierung des Vue-Kommentar-Frameworks (Implementierung der übergeordneten Komponente)

Vue-Implementierung zurück zu top backToTop Komponenten

Einführung in die Verwendung der VUE-Region-Selektor-Komponente (V-Distpicker)

Das obige ist der detaillierte Inhalt vonEinführung in die Bereitstellung benutzerdefinierter Komponentenereignisse von Vue EventBus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!