In den Projekten, die wir in vue3 schreiben, werden wir alle zwischen Komponenten kommunizieren. Welche einfacheren API-Methoden können wir zusätzlich zur Verwendung der öffentlichen Datenquelle Pinia verwenden? Als Nächstes stelle ich Ihnen verschiedene Möglichkeiten der Kommunikation zwischen Eltern-Kind-Komponenten und Kind-Eltern-Komponenten vor. 1. Kommunikation mit Eltern-Kind-Komponenten in den entsprechenden Requisiten der übergeordneten Komponente Der Schlüssel und der Wert,
damit wir die von der übergeordneten Komponente an die untergeordnete Komponente übergebenen Attribute und Werte empfangen können. [Verwandte Empfehlungen:
, 
Web-Front-End-Entwicklung
// children.vue
<template>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="index">
{{item}}
</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
list :{
type: Array,
default: () => {}
}
})
</script>// parent.vue
<template>
<div class="parent-wrap">
<input type="text" v-model="value" class="form-control" placeholder="请输入">
<div class="input-group-append">
<button class="btn btn-primary" @click="handleAdd">添加</button>
</div>
</div>
<!-- child -->
<childrenVue :list="list"></childrenVue>
</template>
<script setup>
import { ref } from 'vue';
import childrenVue from './children.vue';
const value = ref('')
const list = ref(['javaScript', 'Html', 'CSS'])
const handleAdd = () =>{
list.value.push(value.value)
value = ''
}
</script>Wie im Bild oben gezeigt, haben wir festgestellt, dass das Listenarray von übergeben wurde Die übergeordnete Komponente wird auf der untergeordneten Komponente angezeigt. Außerdem können Sie der Liste Daten hinzufügen, um die Daten der untergeordneten Komponente zu aktualisieren. 1.2 bereitstellen/injizierenWenn wir mit dem Gespräch über Requisiten fertig sind, möchten wir als Zweites eine kombinierte Option aus vue3, bereitstellen und injizieren vorstellen.
project wird verwendet, um Werte bereitzustellen, die von untergeordneten Komponenten eingefügt werden können, während inject verwendet wird, um Eigenschaften zu deklarieren, die abgeglichen und in die aktuelle Komponente durch Abgleich vom oberen Anbieter eingefügt werden sollen. Der Code ist wie folgt implementiert: 
// children.vue
<template>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item">{{item}}</li>
</ul>
</template>
<script setup>
import { inject } from 'vue';
const list = inject('list')
</script>// parent.vue
<template>
<div class="parent-wrap">
<input type="text" v-model="value" class="form-control" placeholder="请输入">
<div class="input-group-append">
<button class="btn btn-primary" @click="handleAdd">添加</button>
</div>
</div>
<!-- child -->
<childVue />
</template>
<script setup>
import childVue from "./child.vue";
const { ref, provide, readonly } = require("vue");
const value = ref('')
const list = ref(['javaScript', 'HTML', 'CSS'])
provide('list', readonly(list.value))
const handleAdd = () => {
list.value.push(value.value)
}
</script>provide, um einen Schlüssel von list und einen Wert von bereitzustellen list .value und legen Sie list, value auf ein schreibgeschütztes Attribut fest, um zu verhindern, dass die untergeordnete Komponente die Datenquelle der übergeordneten Komponente ändert. Dann empfing unsere injectAPI list und realisierte die Kommunikation zwischen übergeordneten und untergeordneten Komponenten. Ich habe zwei Methoden für die Übergabe von Werten von Eltern an Kinder eingeführt Aber in unserer Entwicklung werden wir auch auf Situationen stoßen, in denen das untergeordnete Element Werte an die übergeordnete Komponente übergibt. Wie sollten wir das Problem also lösen? Die erste Methode ist die defineEmits API in vue3. Die Code-Implementierung ist wie folgt: // children.vue
<template>
<div class="parent-wrap">
<input type="text" v-model="value" class="form-control" placeholder="请输入" />
<div class="input-group-append">
<button class="btn btn-primary" @click="handleAdd">添加</button>
</div>
</div>
</template>
<script setup>
const { ref, defineEmits } = require("vue");
const value = ref('')
const emits = defineEmits(['add']) //父传子
// 给父组件传一个函数
const handleAdd = () => {
emits('add', value.value)
value.value= ''
}
</script>// parent.vue
<template>
<childVue @add='handleAdd'/>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item">{{item}}</li>
</ul>
</template>
<script setup>
import { ref } from '@vue/reactivity';
import childVue from './child.vue';
const list = ref(['javaScript', 'HTML', 'CSS'])
const handleAdd = (val) => {
list.value.push(val)
}
</script>
Wie im Bild oben gezeigt emit senden wir ein Add-Ereignis an die übergeordnete Komponente, um es zu empfangen it und rufen Sie es gleichzeitig auf der übergeordneten Komponente auf, um die hinzugefügte Logik auszuführen, und ändern Sie dann den value von input in leer, wodurch die Übergabe der übergeordneten Komponente realisiert wird Parameter für die untergeordnete Komponente. 
Nach der Einführung von defineEmits führen wir einen ähnlichen ein. Die Methode von v- model:xxx + emit wird wie folgt implementiert: provide API向外提供了一个 key 为 list，值为list.value，同时将 list,value 设置成了只读属性，防止子组件修改父组件的数据源。然后我们 injectAPI接收了 list，实现了父子组件的通信。
上面我介绍了两种父向子传值的方法，但在我们开发中，我们还会遇到子向父组件传值的情况，那我们该怎么解决呢？ 第一个方法就是vue3中的 defineEmits API，代码实现如下:
// children.vue
<template>
<div class="parent-wrap">
<input type="text" v-model="value" class="form-control" placeholder="请输入" />
<div class="input-group-append">
<button class="btn btn-primary" @click="handleAdd">添加</button>
</div>
</div>
</template>
<script setup>
const { ref, defineProps, defineEmits } = require("vue");
const value = ref('')
const props = defineProps({
list: {
type: Array,
default: () => []
}
})
const emits = defineEmits(['list'])
// 给父组件一点东西
const handleAdd = () => {
// props.list.push(value.value) //不建议直接修改props的值 把握不住数据源的流转
const arr = props.list
arr.push(value.value)
emits('list', arr)
value.value= ''
}
</script><template>
<childVue v-model:list="list" @list ='add'/>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item">{{item}}</li>
</ul>
</template>
<script setup>
import { ref } from '@vue/reactivity';
import childVue from './child.vue';
const list = ref(['javaScript', 'HTML', 'CSS'])
const add =(val) => {
console.log(val);
console.log(list);
}
</script>
如上图所示，我们在子组件上emit一个出了一个 add事件给父组件接收，同时在父组件上调用来执行添加的逻辑，再将 input的value变为空，实现了父组件向子组件传参。
在介绍完 defineEmits后, 我们再来介绍一种与其有异曲同工之处的v-model:xxx + emit的方法，实现如下：
再和上面的defineEmits方法比较完以后，相信大家也看出了这两者的异曲同工在哪了。我们这里是先将父组件的list传给了子组件，再在子组件修改了父组件的数据源，同时再emitrrreeerrreee
Nachdem ich es mit der oben genannten defineEmits-Methode verglichen habe, glaube ich, dass jeder die Ähnlichkeiten zwischen den beiden erkennen kann. Hier übergeben wir zunächst die Liste der übergeordneten Komponente an die untergeordnete Komponente, ändern dann die Datenquelle der übergeordneten Komponente in der untergeordneten Komponente und geben gleichzeitig emit zurück Um es zu erreichen, wird es an die übergeordnete Komponente übergeben. Die untergeordnete Komponente übergibt Werte an die übergeordnete Komponente. (Teilen von Lernvideos: Vuejs-Einführungs-Tutorial
Das obige ist der detaillierte Inhalt vonWie kommuniziere ich zwischen vue3-Komponenten? Eine kurze Analyse der Kommunikationsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
