Konzept der Emission in Vue.Js

• Hallo! In Vue.js ist es möglich, mithilfe von Emit-Ereignissen Informationen zwischen Komponenten auszutauschen. Eine untergeordnete Komponente kann mithilfe von Emit-Ereignissen Informationen an eine übergeordnete Komponente senden. Schauen wir uns unten die Emit-Ereignisse genauer an.

Emit-Ereignisse definieren (Ereignishandler)

Die Funktion defineEmits wird zum Definieren und Verwenden von

Emit-Ereignissen

verwendet

Gooo:

1. *Ereignisse ermitteln (Event-Handler) *:
   Mit der Funktion defineEmits können wir die von der Komponente ausgegebenen Ereignisse definieren.

2. Ereignisse veröffentlichen:
   Ereignisse können über die Emit-Funktion ausgelöst werden.

Wir werden im detaillierten Beispiel unten sehen:

Beispiel 1: Einfaches Ereignis

1. Untergeordnete Komponente: ChildComponent.vue

<template>
  <button @click="notifyParent">Click me</button>
</template>

<script setup>
import { defineEmits } from 'vue'

// Eventlarni aniqlash
const emit = defineEmits(['myEvent'])

const notifyParent = () => {
  emit('myEvent', 'Assalamu alaykuuuum bratanim')
}
</script>

1. ParentComponent: ParentComponent.vue

<template>
  <div>
    <ChildComponent @myEvent="handleMyEvent" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const handleMyEvent = (message) => {
  console.log(message) // Output: Assalamu alaykuuuum bratanim
}
</script>

Beispiel 2: Ereignis mit Argumenten

1. Untergeordnete Komponente: ChildComponent.vue

<template>
  <button @click="sendData">Send Data</button>
</template>

<script setup>
const emit = defineEmits(['sendData'])

const sendData = () => {
  emit('sendData', { id: 1, name: 'Jonibek Davronov' })
}
</script>

1. ParentComponent: ParentComponent.vue

<template>
  <div>
    <ChildComponent @sendData="receiveData" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const receiveData = (data) => {
  console.log(data) // Output: { id: 1, name: 'Jonibek Davronov' }
}
</script>

Beispiel 3: Ereignis mit Validierung

1. Untergeordnete Komponente: ChildComponent.vue

<template>
  <button @click="sendData">Send Validated Data</button>
</template>

<script setup>
const emit = defineEmits({
  // Event nomi va uni qabul qiladigan argumentlar uchun validatsiya
  sendData: (payload) => {
    if (typeof payload.id === 'number' && typeof payload.name === 'string') {
      return true
    } else {
      console.warn('Invalid payload')
      return false
    }
  }
})

const sendData = () => {
  emit('sendData', { { id: 1, name: 'Jonibek Davronov' })
}
</script>

1. ParentComponent: ParentComponent.vue

<template>
  <div>
    <ChildComponent @sendData="handleValidatedData" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const handleValidatedData = (data) => {
  console.log(data) // Output: { id: 1, name: 'Jonibek Davronov' }
}
</script>

Abschließend:

In Vue.js ist es möglich, mithilfe von Emit-Ereignissen Informationen zwischen Komponenten auszutauschen. Sie können Ereignisse mit der Funktion „defineEmits“ definieren und Ereignisse mit der Funktion „emit“ (an die übergeordnete Komponente) ausgeben. Mit diesen Ereignissen kann die untergeordnete Komponente Informationen senden oder Berichte an die übergeordnete Komponente senden. Durch die Validierung von Ereignissen können wir sicherstellen, dass die gesendeten Daten korrekt sind.

Sie können uns in Netzwerken folgen und wenn der Artikel nützlich ist, kommentieren Sie ihn und teilen Sie ihn mit Ihren Vuechi-Freunden. ?

Das obige ist der detaillierte Inhalt vonKonzept der Emission in Vue.Js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!