So implementieren Sie eine übergeordnete Komponente: Klicken Sie, um ein untergeordnetes Komponentenereignis in Vue auszulösen

Im Folgenden werde ich Ihnen ein Beispiel zeigen, wie ein Klick auf eine übergeordnete Vue-Komponente ein Ereignis einer untergeordneten Komponente auslöst. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Kürzlich erfahre ich etwas über die Kommunikationsprobleme zwischen Vue-Eltern- und Kinderkomponenten. Ich bin hier auf einen Ereignisversand und -empfang gestoßen

für die untergeordnete Komponente. Die offizielle Website erklärt dies:

ref wird verwendet, um Referenzinformationen für Elemente oder Unterkomponenten zu registrieren. Referenzinformationen werden im $refs-Objekt der übergeordneten Komponente registriert. Bei Verwendung auf einem normalen DOM-Element verweist der Verweis auf das DOM-Element; bei Verwendung auf einer untergeordneten Komponente verweist der Verweis auf die Komponenteninstanz:

Übergeordnete Komponente app.vue

<template>
  <p id="app">
  <!--父组件-->
  <input v-model="msg">
  <button v-on:click="notify">广播事件</button>
  <!--子组件-->
  <popup ref="child" ></popup>
  </p>
 </template>
 <script>
  import popup from &#39;@/components/popup&#39;
  export default {
  name: &#39;app&#39;,
  data: function () {
   return {
   msg: &#39;&#39;
   }
  },
  components: {
   popup
  },
  methods: {
   notify: function () {
   if (this.msg.trim()) {
    this.$refs.child.parentMsg(this.msg)
   }
   }
  }
  }
 </script>
 <style>
  #app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  }
 </style>

Unterkomponente popup.vue

<template>
   <p>
   <ul>
    <li v-for="item in messages">父组件输入了：{{item}}</li>
   </ul>
   </p>
  </template>
  <style>
   body {
    background-color: #ffffff;
   }
  </style>
  <script>
  export default{
   name: &#39;popup&#39;,
   data: function () {
   return {
    messages: []
   }
   },
   methods: {
   parentMsg: function (msg) {
    this.messages.push(msg)
   }
   }
  }
  </script>

Ich interpretiere dieses Beispiel in mehreren Schritten:

1. Binden Sie das Klickereignis an das Schaltflächenelement der übergeordneten Komponente , Das Ereignis zeigt auf die Benachrichtigungsmethode

2. Registrieren Sie ein ref="child" für die untergeordnete Komponente

3. Bei der Verarbeitung der Benachrichtigungsmethode der übergeordneten Komponente ist $refs.child Wird zum Übergeben des Ereignisses verwendet. Die parentMsg-Methode für die untergeordnete Komponente trägt auch den Parameter msg in der übergeordneten Komponente.

4 Nachdem die untergeordnete Komponente das Ereignis von der übergeordneten Komponente empfangen hat, ruft sie die parentMsg-Methode auf und fügt die empfangene Nachricht ein msg in das Nachrichtenarray

Die laufenden Ergebnisse sind wie folgt:

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

Verwandte Artikel:

Implementieren der Benutzerberechtigungskontrolle in Vue2.0

Detaillierte Erklärung zur Implementierung von Vuex (ausführliches Tutorial)

WeChat-Zahlung über vue.js

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine übergeordnete Komponente: Klicken Sie, um ein untergeordnetes Komponentenereignis in Vue auszulösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!