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中文网其他相关文章！