Die Verwendung und der Unterschied von Requisiten und $emit in Vue
In Vue ist die Kommunikation zwischen Komponenten ein sehr wichtiges Konzept. Vue bietet zwei Methoden, props und $emit, um die Kommunikation zwischen Komponenten zu implementieren. In diesem Artikel werden die Verwendung und der Unterschied zwischen Requisiten und $emit ausführlich vorgestellt und anhand von Codebeispielen veranschaulicht.
1. Props
props ist eine Möglichkeit für übergeordnete Komponenten, Daten an untergeordnete Komponenten zu übergeben. Die übergeordnete Komponente kann über Requisiten beliebige Datentypen an die untergeordnete Komponente übergeben, und die untergeordnete Komponente kann diese Daten empfangen und verwenden.
1.1 Definieren Sie Requisiten in der übergeordneten Komponente.
Wenn Sie eine untergeordnete Komponente in der übergeordneten Komponente verwenden, können Sie Daten an die untergeordnete Komponente übergeben, indem Sie der Beschriftung der untergeordneten Komponente Attribute hinzufügen. Zum Beispiel:
<template>
<div>
<!-- 使用子组件，并通过props传递数据 -->
<ChildComponent :message="message"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>Nach dem Login kopieren
In diesem Beispiel übergeben wir Daten an die untergeordnete Komponente, indem wir ein Attribut namens message zum ChildComponent-Tag hinzufügen und den Wert auf die Nachrichtenvariable in der übergeordneten Komponente festlegen.
1.2 Requisiten in untergeordneten Komponenten empfangen
In untergeordneten Komponenten können Sie von der übergeordneten Komponente übergebene Daten über die Option „props“ empfangen. Zum Beispiel:
<template>
<div>
<!-- 子组件中使用props -->
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>Nach dem Login kopieren
In diesem Beispiel verwenden wir die Option props, um eine Eigenschaft namens message zu definieren und ihren Typ als String anzugeben. Untergeordnete Komponenten können das Nachrichtenattribut direkt verwenden, um die von der übergeordneten Komponente übergebenen Daten abzurufen.
2. $emit
$emit ist eine Möglichkeit für untergeordnete Komponenten, Daten an übergeordnete Komponenten zu übergeben. Untergeordnete Komponenten können über $emit ein benutzerdefiniertes Ereignis auslösen und Daten an die übergeordnete Komponente übergeben.
2.1 Auslösen von Ereignissen in untergeordneten Komponenten
In untergeordneten Komponenten können Sie dies.$emit verwenden, um ein benutzerdefiniertes Ereignis auszulösen und Daten an die übergeordnete Komponente zu übergeben. Zum Beispiel:
<template>
<div>
<button @click="sendMessage">发送消息</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
// 通过$emit触发一个自定义事件，并向父组件传递数据
this.$emit('message', 'Hello Vue!')
}
}
}
</script>Nach dem Login kopieren
In diesem Beispiel lösen wir ein benutzerdefiniertes Ereignis mit dem Namen „message“ aus, indem wir einen @click-Ereignis-Listener auf der Schaltfläche hinzufügen, this.$emit in der Ereignishandlerfunktion verwenden und eine Nachricht mit dem Namen „Hello Vue!“ übergeben Daten.
2.2 Ereignisse in der übergeordneten Komponente empfangen
In der übergeordneten Komponente können Sie die von der untergeordneten Komponente ausgelösten Ereignisse abhören, indem Sie v-on zur Bezeichnung der untergeordneten Komponente hinzufügen, und die übergebenen Daten in der entsprechenden Ereignisbehandlungsfunktion empfangen. Zum Beispiel:
<template>
<div>
<!-- 监听子组件的自定义事件 -->
<ChildComponent @message="onMessage"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
onMessage(data) {
// 在事件处理函数中接收子组件传递过来的数据
console.log('收到消息:', data)
}
}
}
</script>Nach dem Login kopieren
In diesem Beispiel verwenden wir v-on für das ChildComponent-Tag, um die benutzerdefinierte Ereignisnachricht der untergeordneten Komponente abzuhören und die von der untergeordneten Komponente im onMessage-Ereignishandler übergebenen Daten zu empfangen.
3. Der Unterschied zwischen props und $emit
props und $emit werden beide verwendet, um die Kommunikation zwischen Komponenten zu implementieren, es gibt jedoch gewisse Unterschiede in ihrer Verwendung und Wirkungsrichtung.
Props sind die Art und Weise, wie übergeordnete Komponenten Daten in Form von Attributen an untergeordnete Komponenten weitergeben, und untergeordnete Komponenten können die Attribute, die sie empfangen müssen, mit der Option „props“ deklarieren und diese Daten dann wie gewohnt verwenden Attribute.
$emit ist die Art und Weise, wie eine untergeordnete Komponente Daten an eine übergeordnete Komponente übergibt. Die untergeordnete Komponente kann dies verwenden.$emit, um ein benutzerdefiniertes Ereignis auszulösen und die Daten an die übergeordnete Komponente zu übergeben, und dann v-on in der übergeordneten Komponente zu verwenden Warten Sie, bis die untergeordnete Komponente ein Ereignis auslöst und Daten in der entsprechenden Ereignisbehandlungsfunktion empfängt.
Der Datenfluss von Requisiten ist ein unidirektionaler Fluss von der übergeordneten Komponente zur untergeordneten Komponente, und die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente. Der Datenfluss von $emit ist ein unidirektionaler Fluss von der untergeordneten Komponente zur übergeordneten Komponente. Die untergeordnete Komponente übergibt Daten an die übergeordnete Komponente, indem sie Ereignisse auslöst.
Zusammenfassung:
props werden von übergeordneten Komponenten verwendet, um Daten an untergeordnete Komponenten weiterzugeben. Daten werden in Form von Attributen an untergeordnete Komponenten übergeben, und untergeordnete Komponenten empfangen Daten über Requisitenoptionen.
$emit wird von der untergeordneten Komponente verwendet, um Daten an die übergeordnete Komponente zu übergeben. Die untergeordnete Komponente löst dadurch ein benutzerdefiniertes Ereignis aus.$emit und übergibt die Daten an die übergeordnete Komponente. Die übergeordnete Komponente verwendet v-on, um das Ereignis abzuhören Wird von der untergeordneten Komponente ausgelöst und reagiert auf das Ereignis im Ereignis. Empfangen Sie Daten in der Verarbeitungsfunktion.
Das Obige ist eine detaillierte Einführung in die Verwendung und die Unterschiede von Requisiten und $emit in Vue. Ich hoffe, es wird Ihnen helfen, die Kommunikation zwischen Komponenten zu verstehen.
Das obige ist der detaillierte Inhalt vonDie Verwendung und der Unterschied zwischen props und $emit in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
