[Vue.js] Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible"

 

에러

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible"

 

 

 

원인

결론부터 말하면 부모 컴포넌트에서 넘겨준 값을 자식 컴포넌트에서 props로 받은 상태에서 그 값을 자식 컴포넌트에서 변경하려고 할 때 생기는 에러이다.

 

Vue의 데이터흐름은 '단방향'으로, 부모 -> 자식으로 넘겨주는 것은 가능하지만 자식 컴포넌트에서 값을 바꾸면 부모의 값이 변경되지 않는다.

따라서 자식에서 부모가 넘겨준 값을 변경하거나 바꾸는 등의 처리가 필요한 경우, $emit으로 이벤트명과 함께 value를 부모에게 넘겨주어 부모의 method에서 처리할 수 있도록 해야한다.

 

 

 

해결

원래는 이렇게 부모가 넘겨준 'visible'이라는 값을 자식에서 변경하고 있었다.

// 자식 컴포넌트
closeTermsModal() {
   this.visible = false
}

 

아래와 같이 부모에서 처리할 수 있도록 $emit을 사용하여 넘겨주면 해결된다.

<!-- 부모 컴포넌트의 HTML -->
<comp-dialog-term
   :visible="isShowTermsModal"
   @closeTermsModal="closeTermsModal"
/>

// 자식 컴포넌트
closeTermsModal() {
   this.$emit('closeTermsModal', false)
}

// 부모 컴포넌트
closeTermsModal(val) {
    this.isShowTermsModal = val
}

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.