Programing

$209가 아동 이벤트를 유발하지 않음

c10106 2022. 3. 9. 09:56
반응형

$209가 아동 이벤트를 유발하지 않음

VueJS 2.0 프로젝트의 경우 상위 구성 요소에 대해 다음 사항을 설명하십시오.

<template>
<child></child>
<button @click="$emit('childEvent)"></button>
</template>

내가 가지고 있는 하위 구성 요소:

{
  events: { 'childEvent' : function(){.... },
  ready() { this.$on('childEvent',...) },
  methods: { childEvent() {....} }
}

버튼 클릭으로는 아무 것도 작동하지 않는 것 같다.그럼 아이한테 발산할 부모 방법을 만들어야 하는 건가?나는 vuejs 1을 사용하고 있었는데, 지금은 부모 대 자녀 간의 의사소통이 어떻게 되는지 헷갈린다.

다른 답변이 올바르고 대개 데이터 기반 접근법을 사용할 수 있다.

소품 말고 다른 방법이 필요한 이 질문에 답을 찾는 분들을 위해 이것을 덧붙이겠다.사용자 정의 양식 구성 요소 내부의 특정 입력에 초점을 맞추려다 비슷한 문제에 부딪혔다.이를 위해 나는 사용자 지정 구성 요소를 참조한 후 이렇게 해야 했다.

this.$refs.customInput.$emit('focus');
//or
this.$refs.customInput.directlyCallMethod();

이렇게 하면 아동의 vue 인스턴스에 액세스하여 해당 구성 요소에 의해 들리는 이벤트를 내보낼 수 있다.

문서와 동등한 수준:

Vue.js에서는 부모-자녀 구성 요소 관계를 소품 다운, 이벤트 업으로 요약할 수 있다.부모는 소품을 통해 아이에게 데이터를 전달하고, 아이는 이벤트를 통해 부모에게 메시지를 보낸다.다음엔 어떻게 작동하는지 봅시다.

여기에 이미지 설명을 입력하십시오.

그래서 최근 Vue에서는 부모에서 자녀로 이벤트를 보낼 수 없고, 소품을 자녀에게 전달할 수 있으며, 자녀에서 부모로 이벤트를 보낼 수 있다.

사용자 지정 Vue 인스턴스를 사용하십시오.

// Globally
const eventBus = new Vue()

// In your child
eventBus.$on('eventName', () => {
    // Do something
});

// In your parent
eventBus.$emit('eventName')

부모에서 자식까지 이벤트 수행$broadcast()Vue 1.0에서는 전혀 가능하지 않다.

그럴 필요 없을 수도 있지, 보통은 사건이 필요하지 않은 것보다 더 좋은 해결책이 있긴 하지만, 그건 당신의 사용 사례에 따라 달라지거든.

나는 여러 개가 존재할 수 있고 각각의 소품들이 부적절한 팝오버를 위해 이것을 해야 했다.

글로벌 이벤트를 발송하려면 $root Vue 인스턴스에 이벤트 수신기를 추가할 수 있다.

// Child:
    created() {
      this.$root.$on('popover', (e) => {
        // Determine if popover should close, etc.
        this.close()
      })
    },
    
// Parent: 
  this.$emit('popover', 'arg1', 'argn')

잊지 말고 돈을 내라.destroyed뿐만 아니라.

참조URL: https://stackoverflow.com/questions/40637288/emit-doesnt-trigger-child-events

반응형