Vue.Js 中 Emit 的概念

• 你好！ 在 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中文網其他相關文章！