DEV Community

Cover image for Vue.Js da Emit tushunchasi
Mukhriddin Khodiev (work)
Mukhriddin Khodiev (work)

Posted on • Edited on

2

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. 🫡

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay