Concept d'émission dans Vue.Js

• Bonjour ! Dans Vue.js, il est possible d'échanger des informations entre composants à l'aide d'événements d'émission. Un composant enfant peut envoyer des informations à un composant parent à l'aide d'événements d'émission. Examinons de plus près les événements émis ci-dessous.

Définir des événements d'émission (gestionnaire d'événements)

La fonction définirEmits est utilisée pour définir et utiliser des

événements d'émission.

Bien :

1. *Déterminer les événements (gestionnaire d'événements) * :
   Grâce à la fonction définirEmits, nous pouvons définir les événements émis par le composant.

2. Événements de sortie :
   Les événements peuvent être publiés à l'aide de la fonction d'émission.

Nous verrons dans l'exemple détaillé ci-dessous :

Exemple 1 : événement simple

1. Composant enfant : 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>

Exemple 2 : événement avec arguments

1. Composant enfant : 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>

Exemple 3 : Événement avec validation

1. Composant enfant : 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>

En conclusion:

Dans Vue.js, il est possible d'échanger des informations entre composants à l'aide d'événements d'émission. Vous pouvez définir des événements à l'aide de la fonction définirEmits et émettre des événements à l'aide de la fonction émettre (vers le composant parent). Avec ces événements, le composant enfant peut envoyer des informations ou faire un rapport au composant parent. En validant les événements, nous pouvons nous assurer que les données envoyées sont correctes.

Vous pouvez nous suivre sur les réseaux et si l'article est utile, commentez-le et partagez-le avec vos amis Vuechi. ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!