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 통일하여 사용해야함.

<template>
  <div>
    <AComponent v-show="store.currComp == 'A'"></AComponent>
    <BComponent v-if="store.currComp == 'B'"></BComponent>
  </div>
</template>

 

v-if를 사용하는 이유 Bcomponent의 mount함수 내부에 Acomponent에서의 선택에 따라 변하는 데이터에 따른 조작이

nextTick 안에 있을 때 v-show를 사용하면 처음에 데이터가 없어서 에러가 나기 때문.

this.$nextTick(() => {
      if (this.store.currFile.readOnlyMode) {
        let elem = document.querySelector('.menu');
        let newDiv = document.createElement('div');
        newDiv.classList.add('disableDiv');
        newDiv.style.top = elem.offsetTop + 'px';
        newDiv.style.left = elem.offsetLeft + 'px';
        newDiv.style.width = elem.offsetWidth + 'px';
        newDiv.style.height = elem.offsetHeight + 'px';
        elem.parentNode.insertBefore(newDiv, elem);

        window.onresize = function (event) {
          newDiv.style.width = elem.offsetWidth + 'px';
          newDiv.style.height = elem.offsetHeight + 'px';
        };
      } else {
        if (document.querySelector('.disableDiv') !== null) {
          document.querySelector('.disableDiv').remove();
        }
      }
    });