vue emit 3

mounted, beforeUnmount, unmounted

emitter 중복 등록 해결 mounted() { this.emitter.on('event', function (param) { that.receiveEvent(param); }); }, beforeUnmount() { this.emitter.off('event'); }, unmounted() { // } 만약 아래와 같이 하나는 v-show고 하나는 v-if일 때 두 컴포넌트에서 같은 이벤트 리스너를 사용하고 v-if컴포넌트에 위와 같이 작성하면 v-show인 컴포넌트에서는 다시 마운트 되지 않아서 이벤트 리스너 등록이 안된다. 둘다 v-if/v-show 통일하여 사용해야함. v-if를 사용하는 이유 Bcomponent의 mount함수 내부에 Acomponent에서의 선택에 따라 변하는 데이터에 따른..

Frontend/vue3 2023.08.24

컴포넌트 간 데이터 전달

1. v-model v-model 디렉티브는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 양방향 바인딩 할 수 있게 해줍니다. 자식 컴포넌트에서 이벤트를 발생시켜 부모 컴포넌트에 데이터를 전달할 수 있습니다. // Parent.vue // ChildComponent.vue 위의 코드에서 Parent.vue에서 ChildComponent를 호출할 때 v-model 디렉티브를 사용합니다. ChildComponent.vue에서는 localMessage 변수를 사용하여 자식 컴포넌트의 데이터를 다루고, watch 속성을 사용하여 localMessage 값이 변경될 때 input 이벤트를 발생시켜 Parent.vue에서 부모 컴포넌트에 데이터를 전달합니다. 2. prop prop은 부모 컴포넌트에서 자식 컴포넌트로..

Frontend/vue3 2023.04.19

[Vue] 다른 컴포넌트에서 발생한 이벤트 수신 방법 (AgGrid api)

AgGrid의 gridApi AgGrid의 gridApi는 AgGrid 인스턴스에 대한 프로그래밍적인 제어를 제공합니다. gridApi를 사용하면 셀, 행, 열 등의 요소들에 대한 액세스 및 조작이 가능해집니다. https://sumni.tistory.com/108 AgGrid Options AgGrid의 gridApi는 그리드 인스턴스에 대한 프로그래밍적인 제어를 제공하는 반면, columnApi는 그리드 컬럼에 대한 제어를 제공합니다. gridApi를 사용하여 할 수 있는 작업은 다음과 같습니다. 행 추 sumni.tistory.com AgGrid 컴포넌트에서 onGridReady 메소드가 호출될 때, gridApi와 gridColumnApi를 컴포넌트의 데이터에 할당하고 있습니다. 이 데이터는 Ag..

Frontend/vue3 2023.04.03