Konsep Emit dalam Vue.Js

• Hello! Dalam Vue.js, adalah mungkin untuk bertukar-tukar maklumat antara komponen menggunakan acara emit. Komponen anak boleh menghantar maklumat kepada komponen induk menggunakan peristiwa pancaran. Mari kita lihat lebih dekat peristiwa emit di bawah.

Tentukan peristiwa pancaran (pengendali acara)

Fungsi defineEmits digunakan untuk mentakrif dan menggunakan

peristiwa memancarkan.

Goooo:

1. *Tentukan acara (pengendali acara) *:
   Menggunakan fungsi defineEmits, kita boleh menentukan peristiwa yang dipancarkan oleh komponen.

2. Acara keluaran:
   Acara boleh dikeluarkan menggunakan fungsi emit.

Kita akan lihat dalam contoh terperinci di bawah:

Contoh 1: Peristiwa Mudah

1. Komponen Kanak-Kanak: 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>

Contoh 2: Peristiwa dengan hujah

1. Komponen Kanak-Kanak: 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>

Contoh 3: Acara dengan pengesahan

1. Komponen Kanak-Kanak: 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>

Kesimpulannya:

Dalam Vue.js, adalah mungkin untuk bertukar maklumat antara komponen menggunakan peristiwa pancaran. Anda boleh menentukan peristiwa menggunakan fungsi defineEmits dan memancarkan peristiwa menggunakan fungsi emit (kepada komponen induk). Dengan peristiwa ini, komponen anak boleh menghantar maklumat atau melaporkan kepada komponen induk. Dengan mengesahkan peristiwa, kami boleh memastikan bahawa data yang dihantar adalah betul.

Anda boleh mengikuti kami di rangkaian dan jika artikel itu berguna, komen dan kongsikannya dengan rakan Vuechi anda. ?

Atas ialah kandungan terperinci Konsep Emit dalam Vue.Js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!