Vue 3: 부모 컴포넌트에서 자녀 컴포넌트로 이벤트 전송

Vue 3: 부모 컴포넌트에서 자녀 컴포넌트로 이벤트 전송

이제 부모 컴포넌트에서 자녀 컴포넌트로 이벤트를 내보내야 합니다.vue 버전 3에서 볼 수 있습니다.$on,$off그리고.$once인스턴스 메서드가 삭제됩니다.응용 프로그램인스턴스는 이벤트 이미터 인터페이스를 구현하지 않게 되었습니다.

vue 버전 3에서 상위 구성 요소에서 이벤트를 내보내고 하위 구성 요소에서 수신하려면 어떻게 해야 합니까?

상위 이벤트에 대해 하위 구성 요소에서 수신하지 않고 대신 소품을 하위 구성 요소에게 전달합니다. 하위 구성 요소가 데이터를 업데이트해야 하는 경우 상태를 업데이트하기 위해 하위 구성 요소에서 상위 구성 요소로 이벤트를 보냅니다.

읽기 전용 라이프 사이클: [Parent]> [ Prop ]> [ Child ]

판독/갱신 라이프 사이클: [Parent]> [ Prop ]> [ Child ]> [ Exmiss ]> [ Parent ]> [ Update ]> [ Child Update ]

만약 당신이 나와 같다면 어떤 이벤트를 할 것이다.this.$root.$on(...)그리고.this.$root.$emit(...)Vue2에서는 부모/자녀에서 자녀/부모로 코드를 깨끗하게 유지하여 방출과 소품을 각각 사용하여 코드를 폭파합니다.

Vue3 문서에서는 이벤트버스 패턴을 이벤트 이미터 인터페이스를 구현하는 외부 라이브러리를 사용하여 대체할 수 있습니다.pub-sub 패턴을 구현하거나 작성하는 라이브러리를 사용합니다.vue3 이벤트 설명

Option-API(vue 2)를 사용하는 경우 해당 이벤트 파일을 Import해야 하는 경우 모든 컴포넌트에서 올바르게 사용할 수 있습니다.

를 사용하고 있는 경우<script setup>이벤트 라이브러리가 코드를 나타내려면 단계를 추가해야 합니다.

여기 pub-sub javascript 패턴의 기본 예가 있습니다. off 메서드를 추가하고 호출하는 것을 잊지 마십시오.beforeUnmounted(v3),beforeDestroy(v2) 마운트된 각 콜에 대해 여러 기능을 실행하지 않을 것)

    //event.js
    
class Event{
        constructor(){
            this.events = {};
        }
    
        on(eventName, fn) {
            this.events[eventName] = this.events[eventName] || [];
            this.events[eventName].push(fn);
        }
        emit = (eventName, data)=> (this.events[eventName]) ? this.events[eventName].forEach( fn => fn(data)) : '' ;  
    }
    
    export default new Event();

구문 Option-API와 같은 vue2를 실행하는 경우: //vue 구성 요소

import event from './event';
//mounted or any methods
even.on('GG', data=> console.log(`GG Event received ${data}`))

//다른 컴포넌트에서 //를 내보낼 필요가 있습니다.//...

import event from './event';
//on mounted or methods click or...
even.emit('GG', {msg:"Vue3 is super Cool"});

를 사용하고 있는 경우<script setup>즉, 기본적으로 모든 변수와 메서드가 템플릿에 노출됩니다.

//in main.js
import event from './event.js';
//..
app.config.globalProperties.$event = event;
//..

//note if you have an error make sure that you split the the app chaining, like this :

let app = createApp(App);
app.config.globalProperties.$event = event;
app.mount('#app');

//useEvent.js라는 파일을 추가합니다.

// useEvent.js
import { getCurrentInstance } from 'vue'
export default  useEvent => getCurrentInstance().appContext.app.config.globalProperties.$event;

//에서 사용<script setup>

import useEvent from '@/useEvent'
const event    =  useEvent();
event.emit('GG');

이벤트를 부모에서 자녀 구성 요소로 내보내는 방법을 생각해 냈어요.이것은 매우 곤란한 회피책이므로 주의해 주세요!!

//child

setup(){
  // get the current instance
  const instance = getCurrentInstance();

  // function to find the parent instance
  const getParentComponent = (name: string) => {
    let component = null;
    if (instance) {
      let parent = instance.parent;
      while (parent && !component) {
        if (parent.type.name === name) {
          component = parent;
        }
        parent = parent.parent;
      }
      return component;
    } else {
      return null;
    }
  };

  // listener that will be called from within the parent component
  const eventFunction = () => {
    console.log('event fired !!')
  }
      
  onMounted(() => {
    const $parent = getParentComponent('ParentComponentName');

    // register the current instance to the parent component
    if($parent && $parent.props && $parent.props.childInstances){
      ($parent.props.childInstances as any[]).push(instance)
    }
  })

  return {
    eventFunction
  }
}

//parent

name: 'ParentComponentName',
props: {
  childInstances: {
    type: Array as PropType<any[]>,
    required: false, 
    default: () => [] as any[]
  }
},
setup(props){
  const emitChildComponentEvent = (event: string) => {
    if(props.childInstances.length > 0){
      props.childInstances.forEach((component: any) => {
        if(typeof component.proxy[event] === 'function'){
          component.proxy[event]()
        }
      })
    }
  }

  onMounted(() => {
    emitChildComponentEvent('eventFunction');
  })
}

다음을 사용하여 하위 메서드에 액세스할 수 있습니다.Refs

https://v3.vuejs.org/guide/composition-api-template-refs.html

<!-- Parent -->
<template>
    <ChildComponent ref="childComponentRef" />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './components/ChildComponent.vue'

export default { 
  setup( ) {
    const childComponentRef = ref()
    childComponentRef.value.expandAll();

    return { childComponentRef }
  }
}
</script>

<!-- Child -->
<script>
export default {
    setup() {
        const expandAll= () => {
            //logic...
        }

        return { expandAll}
    }
}
</script>

언급URL : https://stackoverflow.com/questions/67371579/vue-3-emit-event-from-parent-to-child-component