• 你好！ 在 Vue.js 中，可以使用發(fā)出事件在組件之間交換信息。子組件可以使用發(fā)出事件向父組件發(fā)送信息。讓我們仔細(xì)看看下面的emit事件。

定義發(fā)出事件（事件處理程序）

DefineEmits 函數(shù)用于定義和使用

發(fā)出事件。

咕咕：

1. *確定事件（事件處理程序）*:
   使用defineEmits函數(shù)，我們可以定義組件發(fā)出的事件。

2. 發(fā)布活動：
   可以使用emit函數(shù)來釋放事件。

我們將在下面的詳細(xì)示例中看到：

示例 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：帶參數(shù)的事件

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：帶有驗(yàn)證的事件

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 中，可以使用發(fā)出事件在組件之間交換信息。您可以使用defineEmits函數(shù)定義事件并使用emit函數(shù)發(fā)出事件（到父組件）。通過這些事件，子組件可以向父組件發(fā)送信息或報(bào)告。通過驗(yàn)證事件，我們可以確保發(fā)送的數(shù)據(jù)是正確的。

您可以在網(wǎng)絡(luò)上關(guān)注我們，如果文章有用，請發(fā)表評論并與您的 Vuechi 朋友分享。 ？

以上是Vue.Js 中 Emit 的概念的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！