• ?????! Vue.js??? ?? ???? ???? ???? ? ?? ??? ?????. ?? ?? ??? ???? ???? ???? ?? ?? ??? ??? ?? ? ????. ???? Emit ???? ??? ???????.

?? ??? ??(??? ???)

DefineEmits ???

?? ???

? ???? ???? ? ?????.

?:

1. *??? ??(??? ???) *:
   DefineEmits ??? ???? ?? ???? ???? ???? ??? ? ????.

2. ?? ???:
   Emit ??? ???? ???? ??? ? ????.

??? ??? ?? ???????.

?? 1: ?? ???

1. ?? ?? ??: 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>

?? 2: ??? ?? ???

1. ?? ?? ??: 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>

?? 3: ??? ??? ??? ???

1. ?? ?? ??: 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>

?????:

Vue.js??? ?? ???? ???? ?? ?? ? ?? ??? ?????. DefineEmits ??? ???? ???? ???? Emit ??? ???? ???? ?? ?? ??? ??? ? ????. ??? ???? ?? ?? ?? ??? ?? ?? ??? ??? ???? ??? ? ????. ???? ?????? ??? ???? ???? ??? ? ????.

?????? ??? ???? ? ??? ??? ????? ??? ?? Vuechi ???? ??? ? ????. ?

? ??? Vue.Js? Emit ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!