[vuejs] computed 활용한 데이터 변경 시 동일 함수 호출

배경설명

• vuejs component 변수 변경 시 emit 호출하여 부모 컴포넌트 리스너 호출

적용방안

• 변경 감지 필요한 변수를 join 문자열 형태로 vue 변수 바인딩

computed: {
  	// inputDate, inputNum, inputStr 값이 변경 될 때마다 inputJoinStr 변수 변경
	inputJoinStr: () => [this.inputDate, this.intputNum, this.inputStr].join('.');
},

• join 문자열 변수 watch 등록 변경 감지하여 콜백 함수 호출

watch: {
  	inputJoinStr: () => this.$emit('callbacakFunc', this.param);
}

결론

• 컴포넌트 내 특정 변수 변경 감지하여 부모 컴포넌트에 동일한 콜백 함수 호출 가능
• 필수값 입력 완료 유효성 체크 활용 가능