좌충우돌 개발 블로그

Vue로 된 프로젝트가 있는데 하나의 파일에서 화면을 전부 만들고 있었다.

각 부분들을 컴포넌트로 만드는데 자식 컴포넌트에 값을 넘겨 주면서

watch로 변경을 감지할 수 있도록 하는 기능이 필요했다.

v-model을 사용하면 쉽게 될 줄 알았는데 미처 생각하지 못한 부분이 있었다.

자식 컴포넌트에서 값을 받은 것이 변경됐는지 이벤트를 보내는 부분을 잊고 있었다.

공식 문서를 읽어보면서 어떻게 해야하는지를 알 수 있었다.

다음은 문서에 나온 코드를 지금 사용하고 있는 방식으로 변경한 것이다.

Parent.vue

<template>
  <Child v-model="check" />
</template>

<script>
import Child from './Child.vue';

export default {
  name: 'Parent',
  data: () => {
    return {
      check: true
    }
  },
  watch: {
    check: val => console.log(val)
  }
}
</script>

Child.vue

<template>
  <input
    type="checkbox"
    :checked="checked"
    @change="$emit('change', $event.target.checked)"
  >
</template>

<script>
export default {
  name: 'Child',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: ['checked']
};
</script>

참고 문헌

1. https://kr.vuejs.org/v2/guide/components.html#컴포넌트의-v-model-사용자-정의

2. https://github.com/vuejs/vue/blob/dev/src/core/vdom/create-component.js#L250-L268