vuejs verwendet $emit und $on, um Werte zwischen Komponenten zu übergeben

$emit und $on können Werte zwischen Komponenten übertragen. Wir wissen, dass übergeordnete Komponenten Requisiten verwenden, um Werte an untergeordnete Komponenten zu übertragen, aber untergeordnete Komponenten dürfen keine Werte übertragen Dies kann durch die Verwendung dieser übergeordneten Komponenten erreicht werden. In diesem Artikel werden hauptsächlich Beispiele für die Verwendung von $emit und $on zum Übertragen von Werten zwischen Komponenten vorgestellt. Wenn Sie interessiert sind, können Sie davon erfahren.

Hinweis: Die Ereignisse $emit und $on müssen sich auf einer öffentlichen Instanz befinden, um ausgelöst zu werden.

Beispiel: Ich möchte die Adressbuchfunktion eines bestimmten Systems implementieren. Auf der Webseite können wir das jQuery-basierte Ztree-Plugin verwenden, um das Verzeichnis anzuzeigen Das Baumverzeichnis muss durch rekursive Komponenten implementiert werden.

1. Es gibt jetzt zwei Komponenten, die übergeordnete Komponente contact_index.vue und die untergeordnete Komponente cust_tree.vue

2 Übergeordnete Komponente Wählen Sie eine Bank aus und springen Sie aus der Verzeichnisstruktur des Bankbaums (implementiert mithilfe der rekursiven Komponente von vuejs). Es müssen zwei Werte übergeben werden:

(1) Die übergeordnete Komponente übergibt die Datenliste des Baumverzeichnisses Die Anzeige der Verzeichnisstruktur erfolgt in der Unterkomponente

(2) Klicken Sie in der Unterkomponente auf die entsprechende Bank, um das Adressbuch der Bank anzufordern . Hier muss der Institutionscode der angeklickten Bank an die übergeordnete Komponente zurückgegeben werden. Die übergeordnete Komponente übermittelt den Organisationscode per Eingabe an die übergeordnete Komponente Die Komponente übergibt den Wert mithilfe von Requisiten an die untergeordnete Komponente. Lassen Sie uns nun über den zweiten Fall sprechen, wie den Wert der untergeordneten Komponente an die übergeordnete Komponente zurückgibt.

Online Baidu verwendet zur Implementierung immer $emit, aber es gibt ein schwerwiegendes Missverständnis, das anderen nicht erklärt wird. Zuerst habe ich die Suchergebnisse verfolgt und nach $ wird es eine untergeordnete Komponente geben, die nicht überwacht wird Nachdem ich die Funktionsänderungen lange studiert hatte, stellte ich fest, dass die Ereignisse $emit und $on auf einer öffentlichen Instanz ausgelöst werden müssen. Mein Vorgang ist wie folgt:

Zuerst füge ich bus.js als öffentliche Instanz im src-Verzeichnis hinzu

Zweitens die übergeordnete Komponente erstellt Definieren Sie das $on-Hörereignis im Inneren

import Vue from 'vue'

export var bus = new Vue()

//父组件与子组件都要import bus.js
import {bus} from '../../bus.js'

Abschließend definieren Sie das Klickereignis in der untergeordneten Komponente und rufen das auf Methode der übergeordneten Komponente Übergeben Sie den entsprechenden Wert über $emit an die übergeordnete Komponente

created(){
  bus.$on('custTreeSay',(id)=>{
  //监听传值--机构代码
  this.instCode = id;
  //关闭弹窗
  this.popupVisibleTree = false;
  //调用查询方法刷新通讯录列表
  this.query();
  });
  bus.$on('custTreeSayName',(name)=>{
  //监听传值--机构名称
  this.instName = name;
  });
}

<span @click="propInstCode(model);propInstName(model)">
 {{model.name}}
</span>

Auf diese Weise wird die untergeordnete Komponente verwendet kann übergeben werden $emit Der Wert wird an den Bus und dann an die übergeordnete Komponente übergeben. Schließlich wird der übergebene Organisationscode an die Hintergrundabfrage übergeben, aber wir benötigen auch den entsprechenden Organisationsnamen, um ihn dem Kunden anzuzeigen, sodass nur zwei Eingaben erforderlich sind Hier muss die Eingabe des Organisationscodes ausgeblendet werden und die andere Eingabe des Organisationsnamens kann wie folgt angezeigt werden:

<script type="text/javascript">
 import {bus} from &#39;../../bus.js&#39;
 export default {
  props: [&#39;model&#39;],//这里通过props接收父组件的传值
  
  //method钩子定义传值方法，这边需要传不同的值
  methods: {
  //通过总线将值传给父组件
  propInstCode:function (model) {
  //$emit触发当前实例事件
  bus.$emit(&#39;custTreeSay&#39;,this.model.id);
  },
  propInstName:function (model) {
  bus.$emit(&#39;custTreeSayName&#39;,this.model.name);
  }
 },
 }

Verwandte Empfehlungen:

//将点击跳出目录选择的方法放到显示的机构选择就可以了
<p class="query_condition_item">
 <label>选择机构</label>
 <input name="instName" v-model="instName" readonly @click="showTree()">
</p>

<p class="query_condition_item">
 <input name="instCode" v-model="instCode" hidden>
</p>

Vuejs2.0 implementiert die Paging-Komponente mithilfe von $emit zur Ereignisüberwachung, Datenübertragung_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonvuejs verwendet $emit und $on, um Werte zwischen Komponenten zu übergeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!