Nützliche Informationen teilen: 7 Möglichkeiten zur Kommunikation mit Vue3-Komponenten!

Komponente ist die Kernfunktion von Vue und eine wiederverwendbare Vue-Instanz. Die Bereiche der Komponenteninstanzen sind jedoch unabhängig voneinander, was bedeutet, dass Daten zwischen verschiedenen Komponenten nicht direkt aufeinander verweisen können. Wie verknüpft man also Daten zwischen Komponenten? Wie kommuniziert und überträgt man Daten? Der folgende Artikel wird Ihnen sieben Komponenten-Kommunikationsmethoden vorstellen. Ich hoffe, er wird Ihnen hilfreich sein!

Dieser Artikel verwendet die kombinierte API-Schreibmethode von <script setup></script>. Im Vergleich zum Optionstyp ist die kombinierte API-Schreibmethode praktischer Einzelheiten finden Sie unter Vue-Dokumentation beschreibt die beiden Methoden. <script setup></script>这种组合式API写法，相对于选项式来说，组合式API这种写法更加自由，具体可以参考Vue文档对两种方式的描述。

注：php中文网线上班也开始教授最新版本的vue课程了，感兴趣的朋友可以了解学习。

本篇文章将介绍如下七种组件通信方式：

• props
• emit
• v-model
• refs
• provide/inject
• eventBus
• vuex/pinia(状态管理工具)

开始搞事情~

举一个栗子

俗话说的好，学习不写demo，那就是耍流氓~

本篇文章将围绕下面这个demo，如下图所示：

上图中，列表和输入框分别是父子组件，根据不同传值方式，可能谁是父组件谁是子组件会有所调整。

1、Props方式

Props方式是Vue中最常见的一种父传子的一种方式，使用也比较简单。【相关推荐：vue.js视频教程】

根据上面的demo，我们将数据以及对数据的操作定义在父组件，子组件仅做列表的一个渲染；

父组件代码如下：

<template>
  <!-- 子组件 -->
  <child-components :list="list"></child-components>
  <!-- 父组件 -->
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
</script>

子组件只需要对父组件传递的值进行渲染即可，代码如下：

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in props.list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
import { defineProps } from &#39;vue&#39;
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
</script>

2、emit方式

emit方式也是Vue中最常见的组件通信方式，该方式用于子传父；

根据上面的demo，我们将列表定义在父组件，子组件只需要传递添加的值即可。

子组件代码如下：

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleSubmit" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits } from &#39;vue&#39;
const value = ref(&#39;&#39;)
const emits = defineEmits([&#39;add&#39;])
const handleSubmit = () => {
  emits(&#39;add&#39;, value.value)
  value.value = &#39;&#39;
}
</script>

在子组件中点击【添加】按钮后，emit一个自定义事件，并将添加的值作为参数传递。

父组件代码如下：

<template>
  <!-- 父组件 -->
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
  <!-- 子组件 -->
  <child-components @add="handleAdd"></child-components>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
// add 触发后的事件处理函数
const handleAdd = value => {
  list.value.push(value)
}
</script>

在父组件中只需要监听子组件自定义的事件，然后执行对应的添加操作。

3、v-model方式

v-model是Vue中一个比较出色的语法糖，就比如下面这段代码

<ChildComponent v-model:title="pageTitle" />

就是下面这段代码的简写形势

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

v-model确实简便了不少，现在我们就来看一下上面那个demo，如何用v-model实现。

子组件

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, defineProps } from &#39;vue&#39;
const value = ref(&#39;&#39;)
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
const emits = defineEmits([&#39;update:list&#39;])
// 添加操作
const handleAdd = () => {
  const arr = props.list
  arr.push(value.value)
  emits(&#39;update:list&#39;, arr)
  value.value = &#39;&#39;
}
</script>

在子组件中我们首先定义props和emits，然后添加完成之后emit指定事件。

注：update:*是Vue中的固定写法，*表示props中的某个属性名。

父组件中使用就比较简单，代码如下：

<template>
  <!-- 父组件 -->
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
  <!-- 子组件 -->
  <child-components v-model:list="list"></child-components>
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
</script>

4、refs方式

在使用选项式API时，我们可以通过this.$refs.name的方式获取指定元素或者组件，但是组合式API中就无法使用哪种方式获取。如果我们想要通过ref的方式获取组件或者元素，需要定义一个同名的Ref对象，在组件挂载后就可以访问了。

示例代码如下：

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in childRefs?.list" :key="i">
      {{ i }}
    </li>
  </ul>
  <!-- 子组件 ref的值与<script>中的保持一致 -->
  <child-components ref="childRefs"></child-components>
  <!-- 父组件 -->
</template>
<script setup>
import { ref } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const childRefs = ref(null)
</script>

子组件代码如下：

<template>
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, defineExpose } from &#39;vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
defineExpose({ list })
</script>

setup组件默认是关闭的，也即通过模板ref获取到的组件的公开实例，不会暴露任何在**<script setup>中声明的绑定。如果需要公开需要通过****defineExpose**** API暴露**。

5、provide/inject方式

provide和inject是Vue中提供的一对API，该API可以实现父组件向子组件传递数据，无论层级有多深，都可以通过这对API实现。示例代码如下所示：

父组件

<template>
  <!-- 子组件 -->
  <child-components></child-components>
  <!-- 父组件 -->
  <div class="child-wrap input-group">
    <input
      v-model="value"
      type="text"
      class="form-control"
      placeholder="请输入"
    />
    <div class="input-group-append">
      <button @click="handleAdd" class="btn btn-primary" type="button">
        添加
      </button>
    </div>
  </div>
</template>
<script setup>
import { ref, provide } from &#39;vue&#39;
import ChildComponents from &#39;./child.vue&#39;
const list = ref([&#39;JavaScript&#39;, &#39;HTML&#39;, &#39;CSS&#39;])
const value = ref(&#39;&#39;)
// 向子组件提供数据
provide(&#39;list&#39;, list.value)
// add 触发后的事件处理函数
const handleAdd = () => {
  list.value.push(value.value)
  value.value = &#39;&#39;
}
</script>

子组件

<template>
  <ul class="parent list-group">
    <li class="list-group-item" v-for="i in list" :key="i">{{ i }}</li>
  </ul>
</template>
<script setup>
import { inject } from &#39;vue&#39;
// 接受父组件提供的数据
const list = inject(&#39;list&#39;)
</script>

值得注意的是使用provide进行数据传递时，尽量readonly

Hinweis: php Chinesisch online arbeiten hat auch damit begonnen, die neueste Version der Vue-Kurse zu unterrichten . Interessierte Freunde können mehr erfahren.

🎜In diesem Artikel werden die folgenden sieben Komponentenkommunikationsmethoden vorgestellt: 🎜

• props
• emit
• v-model
• refs
• bereitstellen/injizieren
• eventBus
• vuex/pinia (Zustandsverwaltungstool)

🎜Fangen Sie an, Dinge zu tun~🎜Geben Sie mir ein Beispiel🎜Wie das Sprichwort sagt: Wenn Sie beim Lernen keine Demos schreiben, benehmen Sie sich wie ein Hooligan~🎜🎜Dieser Artikel konzentriert sich auf Folgendes Demo, wie im Bild unten gezeigt:🎜 🎜🎜🎜Das obige Bild, Liste und Eingabefeld sind übergeordnete bzw. untergeordnete Komponenten. Abhängig von den verschiedenen Wertübertragungsmethoden, wer ist die übergeordnete Komponente und Wer die untergeordnete Komponente ist, kann angepasst werden. 🎜

1. Props-Methode

🎜Props-Methode ist die häufigste Methode zur Übergabe vom Vater an den Sohn🎜 in Vue ist auch relativ einfach zu bedienen. [Verwandte Empfehlungen: vue.js-Video-Tutorial] 🎜🎜Gemäß der Demo oben , Wir definieren die Daten und Operationen für die Daten in der übergeordneten Komponente, und die untergeordnete Komponente rendert nur die Liste. 🎜🎜Der Code der übergeordneten Komponente lautet wie folgt: 🎜rrreee🎜Die untergeordnete Komponente muss nur den von der übergeordneten Komponente übergebenen Wert rendern Komponente, der Code lautet wie folgt: 🎜rrreee

2. Emit-Methode

🎜emit-Methode ist auch die häufigste Komponentenkommunikationsmethode in Vue . Diese Methode wird für Sub-An die übergeordnete Komponente übergeben🎜；🎜🎜Gemäß der obigen Demo definieren wir die Liste in der übergeordneten Komponente und die untergeordnete Komponente muss nur den Mehrwert übergeben. 🎜🎜Der Unterkomponentencode lautet wie folgt: 🎜rrreee🎜Nachdem Sie in der Unterkomponente auf die Schaltfläche [Hinzufügen] geklickt haben, emittieren Sie ein benutzerdefiniertes Ereignis und übergeben den hinzugefügten Wert als Parameter. 🎜🎜Der Code der übergeordneten Komponente lautet wie folgt: 🎜rrreee🎜In der übergeordneten Komponente müssen Sie nur die benutzerdefinierten Ereignisse der untergeordneten Komponente abhören und dann die entsprechende Additionsoperation ausführen. 🎜

3. V-Modell-Methode

🎜V-Modell ist ein ausgezeichneter syntaktischer Zucker in Vue, wie der folgende Code 🎜rrreee🎜 ist die Abkürzung des folgenden Codes🎜rrreee🎜v-model ist in der Tat viel einfacher. Schauen wir uns nun die obige Demo an und wie man sie mit v-model implementiert. 🎜🎜Unterkomponente🎜rrreee🎜In der Unterkomponente definieren wir zuerst props und emis und fügen dann das mit emit angegebene Ereignis hinzu. 🎜

🎜Hinweis: update:* ist eine feste Schreibmethode in Vue und * stellt einen Eigenschaftsnamen in props dar. 🎜

🎜Die Verwendung in der übergeordneten Komponente ist wie folgt: 🎜rrreee

4 refs method

🎜Bei Verwendung der optionalen API können wir this.$refs.name übergeben, um das angegebene Element oder die angegebene Komponente abzurufen, diese Methode kann jedoch nicht in der kombinierten API verwendet werden. Wenn wir eine Komponente oder ein Element über ref erhalten möchten, müssen wir ein Ref-Objekt mit demselben Namen definieren, auf das nach dem Mounten der Komponente zugegriffen werden kann. 🎜🎜Der Beispielcode lautet wie folgt: 🎜rrreee🎜Der Unterkomponentencode lautet wie folgt: 🎜rrreee🎜Die setup-Komponente ist standardmäßig geschlossen, d. h. die öffentliche Instanz der Komponente, die über erhalten wird Die Vorlage ref stellt keine in 🎜**<script setup></script> deklarierten Bindungen 🎜 zur Verfügung. Wenn Sie 🎜Exposure benötigen, müssen Sie es über die ****defineExpose**** API** verfügbar machen. 🎜

5. Provide/inject method

🎜provide und inject sind ein Paar von APIs, die in Vue bereitgestellt werden. Mit dieser API können übergeordnete Komponenten Daten an untergeordnete Komponenten weitergeben, unabhängig davon, wie tief die Ebene ist, sie kann über dieses API-Paar implementiert werden. Der Beispielcode lautet wie folgt: 🎜🎜Übergeordnete Komponente🎜rrreee🎜Untergeordnete Komponente🎜rrreee🎜Es ist erwähnenswert, dass Sie bei der Verwendung von provide für die Datenübertragung versuchen, readonlyzu verwenden > zur Datenübertragungsverpackung, um zu verhindern, dass untergeordnete Komponenten die vom übergeordneten Element übergebenen Daten ändern🎜. 🎜

6. Event-Bus

Der Event-Bus wurde aus Vue3 entfernt, kann aber mit Hilfe von Drittanbieter-Tools durchgeführt werden. mitt oder tiny-emitter werden nicht empfohlen Obwohl die Busmethode in den meisten Fällen relativ einfach und grob ist, um die Komponentenkommunikation zu implementieren, stellt die Aufrechterhaltung des Ereignisbusses auf lange Sicht ein großes Problem dar, daher werde ich es hier nicht erklären. Weitere Informationen finden Sie in der Dokumentation Tool

7. Statusverwaltungstools

Vuex

und Pinia sind Tools zur Statusverwaltung in Vue3, da diese beiden Tools relativ leistungsfähig sind Einzelheiten finden Sie in der Dokumentation am Ende

Dieser Artikel endet hier. Im Allgemeinen ist er relativ einfach und es gibt nichts Kompliziertes.

Wenn dieser Artikel für Sie von Nutzen ist, liken Sie ihn bitte, kommentieren Sie ihn und speichern Sie ihn, damit Sie ihn nicht finden, wenn Sie ihn brauchen.

Wenn der Artikel Fehler enthält, korrigieren Sie mich bitte ~

Originaladresse: https://juejin.cn/post/7062740057018335245

Autor: Yiwan Zhou

(Lernvideo-Sharing:

Webfront- Ende des Tutorials

)