[Vue.js] v-model

 

 

Vue2에서 커스텀 컴포넌트를 사용한경우 사용한 컴포넌트에 v-model을 사용하면 props로 받을 때 'value'라는 명칭으로 받을 수 있었고, Vue3에서는 .sync를 사용하지않아도 [v-model:value]라는 문법을 사용하면 .sync의 역할이 대체된다.

 

 

Vue 2.x

 

📄 부모컴포넌트

부모컴포넌트에서 아래와 같이 v-model로 값을 할당한다.

<my-component v-model="keyword" />

 

 

📄 자식컴포넌트 - myComponent.vue

<template>
    <div>
        <input
            type="text"
            placeholder="검색어를 입력하세요."
        />
    </div>
</template>

<script>
export default {
    props: {
    	<!-- 이렇게 받을 수 있다. -->
        value: {
    	    type: [String, Number],
            required: true,
        }
    }
}
</script>

 

 

 

 

출처

v-model | Vue.js

 

 

---

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