Vue.Js の Emit の概念

• Hello! Vue.js では、emit イベントを使用してコンポーネント間で情報を交換することができます。子コンポーネントは、発行イベントを使用して親コンポーネントに情報を送信できます。以下の発行イベントを詳しく見てみましょう。

発行イベント (イベント ハンドラー) を定義する

defineEmits 関数は、

発行イベントを定義して使用するために使用されます。

グー：

1. *イベントの決定 (イベントハンドラー) *:
   defineEmits 関数を使用すると、コンポーネントによって発行されるイベントを定義できます。

2. イベントのリリース:
   イベントはエミット機能を使用してリリースできます。

以下の詳細な例を見てみましょう:

例 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 では、emit イベントを使用してコンポーネント間で情報を交換することができます。 defineEmits 関数を使用してイベントを定義し、emit 関数を使用してイベントを (親コンポーネントに) 送信できます。これらのイベントを使用して、子コンポーネントは親コンポーネントに情報を送信したり、レポートを送信したりできます。イベントを検証することで、送信されたデータが正しいことを確認できます。

ネットワーク上で私たちをフォローして、記事が役立つ場合は、コメントして Vuechi の友達と共有してください。 ?

以上がVue.Js の Emit の概念の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。