[콜럼Vue스] 컴포넌트에서의 v-model 디렉터브

v-model 디렉티브 활용법 학습

• v-model은 부모와 자식 컴포넌트 간의 양방향 데이터 바인딩을 쉽게 구현해주는 디렉티브임.
• 부모 컴포넌트에서 자식 컴포넌트의 데이터를 바인딩하고, 자식 컴포넌트에서 이벤트로 값을 업데이트할 수 있음.

기본적인 부모-자식 데이터 바인딩 예제 구현

• 부모 컴포넌트에서 속성을 내려주고, 자식 컴포넌트에서 이벤트로 값을 업데이트하는 방식을 먼저 구현함.

<!-- 부모 컴포넌트 (App.vue) -->
<template>
  <div>
    <InputName :name="searchName" @update:name="changeSearchName" />
    <h3>검색어: {{ searchName }}</h3>
  </div>
</template>

<script>
import InputName from './components/InputName.vue';

export default {
  name: "App",
  components: { InputName },
  data() {
    return { searchName: "John" };
  },
  methods: {
    changeSearchName(name) {
      this.searchName = name;
    },
  },
};
</script>

<!-- 자식 컴포넌트 (InputName.vue) -->
<template>
  <input type="text" :value="name" @input="$emit('update:name', $event.target.value)" />
</template>

<script>
export default {
  name: "InputName",
  props: ["name"],
};
</script>

v-model 적용으로 코드 개선

• 기존 코드에서 이벤트와 메서드를 모두 작성해야 했지만, v-model을 사용하면 코드가 더 간결해짐.
• v-model을 적용하면 부모 컴포넌트가 자식 컴포넌트로 값을 전달하고, 자식 컴포넌트가 자동으로 부모 데이터를 업데이트함.

<!-- 부모 컴포넌트 (App.vue) -->
<template>
  <div>
    <InputName v-model:name="searchName" />
    <h3>검색어: {{ searchName }}</h3>
  </div>
</template>

<script>
import InputName from './components/InputName.vue';

export default {
  name: "App",
  components: { InputName },
  data() {
    return { searchName: "John" };
  },
};
</script>

v-model의 동작 원리 정리

• 자식 컴포넌트에서 props로 값을 받고, update:속성명 이벤트를 통해 부모 데이터가 자동으로 업데이트됨.
• v-model은 v-model:속성명="데이터" 형태로 사용하며, 자식에서 **$emit('update:속성명', 값)**을 호출해야 함.