TheLazy.Dev
Portfolio GitHub

Blog

vue |nuxt |mukhriddinweb |javascript

Vue.Js da Emit tushunchasi

mukhriddinweb

Mukhriddin Khodiev (work)

Posted on July 22, 2024

Vue.Js da Emit tushunchasi
  • Assalamu alaykum ! Vue.js da emit hodisalari yordamida komponentlar o'rtasida ma'lumot almashish imkoniyati mavjud. Emit hodisalari yordamida bola komponent ota komponentga ma'lumot yuborishi mumkin. Quyida emit hodisalari haqida batafsil ko'rib chiqamiz.

emit Hodisalarini Aniqlash (event handler)

emit hodisalarini aniqlash va ishlatish uchun defineEmits funksiyasidan foydalaniladi.

Image description

Gooo:

  1. *Eventlarni aniqlash (event handler) *:
    defineEmits funksiyasidan foydalanib, komponentda chiqariladigan eventlarni ahndel qilsihimiz mumkin.

  2. Eventlarni chiqarish:
    Eventlarni kerakli joyda emit funksiyasi yordamida chiqarish mumkin.

Quyida batafsil msiloda ko'ramiz:

Misol 1: Oddiy Event

  1. Bola Komponent: 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>
Enter fullscreen mode Exit fullscreen mode
  1. Ota Komponent: 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>
Enter fullscreen mode Exit fullscreen mode

Misol 2: Argumentlar bilan Event

  1. Bola Komponent: 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>
Enter fullscreen mode Exit fullscreen mode
  1. Ota Komponent: 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>
Enter fullscreen mode Exit fullscreen mode

Misol 3: Validatsiya bilan Event

  1. Bola Komponent: 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>
Enter fullscreen mode Exit fullscreen mode
  1. Ota Komponent: 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>
Enter fullscreen mode Exit fullscreen mode

Xulosa o'laroq:

Vue.js da emit hodisalari yordamida komponentlar o'rtasida ma'lumot almashish mumkin ekan. defineEmits funksiyasidan foydalanib eventlarni aniqlash va emit funksiyasi yordamida eventlarni chiqarish mumkin (ota componentaga) . Bu hodisalar yordamida bola komponent ota komponentga ma'lumot yuborishi yoki xabar berishi mumkin. Eventlarni validatsiya qilish orqali, yuborilgan ma'lumotlarni to'g'ri ekanligiga ishonch hosil qilishimiz mumkin ekan.

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡

💖 💪 🙅 🚩
mukhriddinweb
Mukhriddin Khodiev (work)

Posted on July 22, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Vue.Js da Emit tushunchasi
vue Vue.Js da Emit tushunchasi

July 22, 2024