Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie eine übergeordnete Komponente, um untergeordnete Komponentenereignisse in Vue aufzurufen

亚连
Freigeben: 2018-06-05 11:13:05
Original
1908 Leute haben es durchsucht

Jetzt werde ich mit Ihnen einen Artikel darüber teilen, wie eine übergeordnete Vue-Komponente eine Ereignismethode für eine untergeordnete Komponente aufruft. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Vue-Elternkomponente übergibt Ereignisse/Aufrufe von Ereignissen an untergeordnete Komponenten

Es werden keine Daten (Requisiten) übergeben, es gilt für Vue 2.0

Methode 1: Die untergeordnete Komponente hört auf die von der übergeordneten Komponente gesendete Methode

Methode 2: Die übergeordnete Komponente ruft die Methode der untergeordneten Komponente auf

Untergeordnete Komponente:

export default {
  mounted: function () {
   this.$nextTick(function () {
    this.$on('childMethod', function () {
     console.log('监听成功')
    })
   })
  },
  methods {
    callMethod () {
     console.log('调用成功')
    }
  }
}
Nach dem Login kopieren

Übergeordnete Komponente:

<child ref="child" @click="click"></child>

export default {
  methods: {
   click () {
   this.$refs.child.$emit(&#39;childMethod&#39;) // 方法1
   this.$refs.child.callMethod() // 方法2
  },
  components: {
   child: child
  }
}
Nach dem Login kopieren

Das bin ich. Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So erstellen Sie Komponenten in Vue

So fügen Sie dynamisch Li-Tags hinzu und fügen Attribute und Bindungen in jQuery Defined hinzu Ereignismethode

So implementieren Sie die Standardstiländerung in elementui

Das obige ist der detaillierte Inhalt vonSo verwenden Sie eine übergeordnete Komponente, um untergeordnete Komponentenereignisse in Vue aufzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
vue
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage