Einführung in die Kommunikationsmethoden von Vue-Komponenten (mit Code)

Der Inhalt dieses Artikels ist eine Einführung in die Kommunikationsmethode von Vue-Komponenten (mit Code). Ich hoffe, dass er für Freunde in Not nützlich ist du hilfst.

Die Komponentisierung von Vue sollte seine Kernidee sein. Unabhängig davon, ob es sich um eine große Seite oder eine kleine Schaltfläche handelt, kann es als Komponente bezeichnet werden. Bei der Vue-basierten Entwicklung werden Komponenten einzeln geschrieben, unabhängig davon, ob es sich um Basiskomponenten oder Geschäftskomponenten handelt, und am Ende müssen sie alle zusammengefügt werden. Gemäß der hierarchischen Beziehung der Komponenten können die Beziehungen zwischen Komponenten wie folgt zusammengefasst werden: Eltern-Kind-Beziehung, Generationsbeziehung, Bruderbeziehung und keine verwandte Beziehung.

$ref, $parent, $children

Basierend auf dem aktuellen Kontext können Sie über $ref, $parent, $children auf die Komponenteninstanz zugreifen und die Methode der Komponente direkt aufrufen oder Zugriffsdaten. Unter anderem kann $parent auf die übergeordnete Komponente der aktuellen Komponente zugreifen, und $children kann auf alle untergeordneten Komponenten der aktuellen Komponente zugreifen. Obwohl sowohl $parent als auch $children Komponenteninstanzen erhalten können, können sie nicht über Ebenen oder Geschwister hinweg kommunizieren, was ihr Nachteil ist.

provide und inject

provide/inject sind neue APIs, die von Vue nach Version 2.2.0 hinzugefügt wurden.

Dieses Optionspaar muss zusammen verwendet werden, damit eine Vorgängerkomponente eine Abhängigkeit in alle ihre Nachkommen einfügen kann, unabhängig davon, wie tief die Komponentenhierarchie ist, und sie wird immer ab dem Zeitpunkt wirksam, an dem die Upstream- und Es werden nachgelagerte Beziehungen aufgebaut.

Das heißt, geben Sie einen Wert in der übergeordneten Komponente an und fügen Sie den geänderten Wert in die zu verwendende untergeordnete Komponente ein, das heißt:

// Parent.vue
export default {
    provide() {
        return {
            name: 'Stone'
        }
    }
}
// Child.vue
export default {
   inject: ['name'],
   mounted() {
       console.log(this.name)
   }
}

Nicht nur Child.vue, solange Es ist Parent.vue. Mit dieser Methode können Unterkomponenten unabhängig von der Generationsspanne eingefügt werden. Diese mehrstufige, komponententransparente Übertragungsmethode kann die Klarheit des unidirektionalen Datenflusses gewährleisten. Mithilfe dieser beiden APIs können beispielsweise globale Informationen wie Benutzerinformationen vervollständigt werden, ohne dass die Drittanbieterbibliothek vuex eingeführt werden muss.

Die Alternative zu Vuex

vuex besteht darin, die Daten zentral zu verwalten und dort abzurufen, wo sie benötigt werden. Nach dieser Idee können wir globale Informationen in die Root-Komponente App.vue einfügen und hinzufügen die Seite Überall einsetzbar.

// App.vue
<template>
  <div>
    <router-view></router-view>
  </div>
</template>
export default {
    provide() {
        return {
            userInfo: this.user
        }
    },
    data() {
        return {
            user: {}
        }
    },
    methods: {
      getUserInfo () {
        $.ajax('/user/info', (data) => {
          this.user = data
        })
      }
    }
}

stellt die gesamte App.vue-Instanz this der Außenwelt zur Verfügung, sodass andere Seiten über this.userInfo Benutzerinformationen erhalten können.

<template>
  <div>
    {{ userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['userInfo']
  }
</script>

$dispatch und $broadcast

Bei diesen beiden APIs handelt es sich um Vue 1.0-Versionen, mit denen Ereignisse an höhere Ebenen gesendet werden, und mit $broadcast werden Ereignisse an niedrigere Ebenen gesendet sind in der Version 2.0, die veraltet ist.

Weil die auf der Komponentenbaumstruktur basierende Ereignisflussmethode manchmal schwer zu verstehen ist und mit zunehmender Komponentenstruktur immer fragiler wird.

Wir können die Dispatch- und Broadcast-Methoden jedoch selbst für die ebenenübergreifende Kommunikation von Komponenten implementieren. Der Schlüssel zu ihrer Implementierung besteht darin, die zu kommunizierende Komponente richtig zu finden, dh indem die Namensoption der Komponente abgeglichen wird, um die Komponente nach unten oder oben zu finden.

Beide Methoden müssen 3 Parameter übergeben. Der erste Parameter ist der Namensoptionswert der Kommunikationskomponente, der zweite ist der benutzerdefinierte Ereignisname und der dritte ist der Wert, der an die Kommunikationskomponente übergeben werden soll. Beim Versand wird die übergeordnete Komponente in der While-Schleife nach oben durchsucht, bis der Komponentenname mit der Namensoption einer übergeordneten Komponente übereinstimmt. Zu diesem Zeitpunkt ist die übergeordnete Komponente die Komponente, mit der kommuniziert werden soll. Die Broadcast-Methode ähnelt der Dispatch-Methode und sucht über die forEach-Schleife nach unten nach Unterkomponenten. Kapseln Sie abschließend ein Mixin, um die Wiederverwendung zu erleichtern.

// emitter.js 
function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    const name = child.$options.name;
    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.name;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.name;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

Mischen Sie Komponenten in Komponenten durch Mixins, um eine Kommunikation zwischen Komponenten zu erreichen.

<!-- Parent.vue -->
<template>
  <button @click="handleClick">
    触发事件
    <Child></Child>
  </button>
</template>
<script>
import Emitter from "../assets/js/emitter.js";
import Child from "./Child.vue";
export default {
  name: "Parent",
  mixins: [Emitter],
  created() {
    this.$on("on-message", message => {
      console.log(message);
    });
  },
  components: {
    Child
  },
  methods: {
    handleClick() {
      this.broadcast("Child", "on-message", "Hello, I am Parent Component");
    }
  }
};
</script>

<!-- Child.vue -->
<template>
  <div></div>
</template>
<script>
import Emitter from "../assets/js/emitter.js";
export default {
  name: "Child",
  mixins: [Emitter],
  mounted() {
    this.$on("on-message", message => {
      console.log(message);
      this.dispatch("Parent", "on-message", "Copy that, I am Child Component");
    });
  }
};
</script>

Im Vergleich zu den beiden integrierten APIs in der Version Vue 1.0 weist die Selbstimplementierungsmethode die folgenden Unterschiede auf:

• Sie müssen den Namen der Komponente als übergeben der erste Parameter;
• Die Schleife stoppt, wenn die Komponente übereinstimmt, und sprudelt nicht.
• Der übergebene Wert kann nur ein Parameter sein in Form eines Objekts oder Arrays vorliegen;

Andere Methoden

Es gibt andere Methoden für die Komponentenkommunikation in Vue, wie zum Beispiel:

1. props, $emit

<!-- Parent.vue -->
<template>
  <Child :info="info"
         @update="onUpdateName"></Child>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      info: {
        name: "stone"
      }
    };
  },
  components: {
    Child
  },
  methods: {
    onUpdateName(name) {
      this.info.name = name;
    }
  }
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <div>{{info.name}}</div>
    <button @click="handleUpdate">update</button>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  methods: {
    handleUpdate() {
      this.$emit("update", "new-name");
    }
  }
};
</script>

Die übergeordnete Komponente übergibt ihre eigenen Methoden an die untergeordnete Komponente, und die untergeordnete Komponente ruft die Methode auf, um mithilfe des Ereignisbus-Ereignisbusses $attrs Daten an die übergeordnete Komponente zu übergeben und $listeners. Neue APIs in Vue 2.4.

$attrs enthält Attributbindungen (außer Klasse und Stil) im übergeordneten Bereich, die nicht als Requisiten erkannt (und abgerufen) werden.

$listeners enthält V-on-Ereignis-Listener im übergeordneten Bereich (ohne .native-Modifikator). Vuex zentralisierte Zustandsverwaltung

Am Ende geschrieben

Verschiedene Kommunikationsmethoden eignen sich für verschiedene Szenarien. Die Kommunikation kann über die integrierte API von Vue oder über benutzerdefinierte Ereignisse erfolgen, wenn die Anwendung vorhanden ist Wenn Sie komplex genug sind, können Sie Vuex für die Datenverwaltung verwenden.

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Tutorial-Video auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonEinführung in die Kommunikationsmethoden von Vue-Komponenten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!