Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie eine übergeordnete Komponente: Klicken Sie, um ein untergeordnetes Komponentenereignis in Vue auszulösen

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

亚连
亚连Original
2018-06-07 11:27:215806Durchsuche

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!

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