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 중국어 웹사이트의 기타 관련 기사를 참조하세요!