مفهوم Emit در Vue.Js – انجمن DEV

Summarize this content to 400 words in Persian Lang

درود بر شما! Vue.js da emit امکان تبادل اطلاعات بین اجزا با استفاده از رویدادها وجود دارد. با استفاده از رویدادهای پخش، یک مؤلفه فرزند می تواند اطلاعات یا پیامی را به مؤلفه والد ارسال کند. در زیر emit بیایید نگاهی دقیق تر به رویدادها بیندازیم.

emit شناسایی رویدادها (کنترل کننده رویداد)

emit برای شناسایی و استفاده از رویدادها defineEmits تابع استفاده می شود.

گوو:

*تشخیص رویداد (کنترل کننده رویداد) *:defineEmits با استفاده از تابع، می توانیم رویدادهای منتشر شده در کامپوننت را مدیریت کنیم.
رویدادها را صادر کند:رویدادها در مکان مناسب emit می توان با استفاده از تابع خروجی داد

در زیر یک مثال مفصل آورده شده است:

مثال 1: رویداد ساده

جزء Bola: ChildComponent.vue

template>
@click=”notifyParent”>Click me
template>

script setup>
import { defineEmits } from ‘vue’

// Eventlarni aniqlash
const emit = defineEmits([‘myEvent’])

const notifyParent = () => {
emit(‘myEvent’, ‘Assalamu alaykuuuum bratanim’)
}
script>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کامپوننت Ota: ParentComponent.vue

template>

@myEvent=”handleMyEvent” />

template>

script setup>
import ChildComponent from ‘./ChildComponent.vue’

const handleMyEvent = (message) => {
console.log(message) // Output: Assalamu alaykuuuum bratanim
}
script>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال 2: رویداد با آرگومان ها

جزء Bola: ChildComponent.vue

template>
@click=”sendData”>Send Data
template>

script setup>
const emit = defineEmits([‘sendData’])

const sendData = () => {
emit(‘sendData’, { id: 1, name: ‘Jonibek Davronov’ })
}
script>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کامپوننت Ota: ParentComponent.vue

template>

@sendData=”receiveData” />

template>

script setup>
import ChildComponent from ‘./ChildComponent.vue’

const receiveData = (data) => {
console.log(data) // Output: { id: 1, name: ‘Jonibek Davronov’ }
}
script>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال 3: رویداد با اعتبارسنجی

جزء Bola: ChildComponent.vue

template>
@click=”sendData”>Send Validated Data
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>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کامپوننت Ota: ParentComponent.vue

template>

@sendData=”handleValidatedData” />

template>

script setup>
import ChildComponent from ‘./ChildComponent.vue’

const handleValidatedData = (data) => {
console.log(data) // Output: { id: 1, name: ‘Jonibek Davronov’ }
}
script>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در نتیجه:

Vue.js da emit رویدادها می توانند برای تبادل اطلاعات بین اجزا استفاده شوند. defineEmits استفاده از تابع برای شناسایی رویدادها و emit رویدادها را می توان با استفاده از تابع (به جزء والد) منتشر کرد. با این رویدادها، مؤلفه فرزند می تواند اطلاعات یا گزارش به مؤلفه والد ارسال کند. با اعتبارسنجی رویدادها، می توانیم از صحت داده های ارسالی مطمئن شویم.

می توانید ما را در شبکه ها دنبال کنید و در صورت مفید بودن مطلب آن را با دوستان خود به اشتراک بگذارید. 🫡

🔗 https://t.me/mukhriddinweb🔗 https://medium.com/@mukhriddinweb🔗 https://dev.to/mukhriddinweb🔗 https://khodieff.uz🔗 https://github.com/mukhriddin-dev🔗 https://linkedin.com/in/mukhriddin-khodiev🔗 https://youtube.com/@mukhriddinweb

template>
   @click="notifyParent">Click me
template>

script setup>
import { defineEmits } from 'vue'

// Eventlarni aniqlash
const emit = defineEmits(['myEvent'])

const notifyParent = () => {
  emit('myEvent', 'Assalamu alaykuuuum bratanim')
}
script>

template>
  

     @myEvent="handleMyEvent" />
  
template>

script setup>
import ChildComponent from './ChildComponent.vue'

const handleMyEvent = (message) => {
  console.log(message) // Output: Assalamu alaykuuuum bratanim
}
script>

template>
   @click="sendData">Send Data
template>

script setup>
const emit = defineEmits(['sendData'])

const sendData = () => {
  emit('sendData', { id: 1, name: 'Jonibek Davronov' })
}
script>

template>
  

     @sendData="receiveData" />
  
template>

script setup>
import ChildComponent from './ChildComponent.vue'

const receiveData = (data) => {
  console.log(data) // Output: { id: 1, name: 'Jonibek Davronov' }
}
script>

template>
   @click="sendData">Send Validated Data
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>

template>
  

     @sendData="handleValidatedData" />
  
template>

script setup>
import ChildComponent from './ChildComponent.vue'

const handleValidatedData = (data) => {
  console.log(data) // Output: { id: 1, name: 'Jonibek Davronov' }
}
script>