인프런 커뮤니티 질문&답변
작성한 질문수
자식 컴포넌트에 input 태그, checkbox 같은 form 태그가 없으면 v-model 안 쓰는건가요?
작성
·
496
0
<!-- 부모.vue -->
<template>
<custom-counter v-model="counterValue" />
<template>
<script>
import CustomCounter from './CustomCounter.vue';
export default {
components: {
CustomCounter,
},
data() {
return {
counterValue: 0,
};
},
};
</script>
<!-- CustomCounter.vue -->
<template>
<div>
<p>{{ message }}</p>
<p>{{ value }}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number,
default: 0,
},
},
data() {
return {
localValue: this.value,
};
},
computed: {
message() {
return `The current value is ${this.localValue}`;
},
},
methods: {
increment() {
this.localValue++;
},
decrement() {
this.localValue--;
},
},
watch: {
localValue(newValue) {
this.$emit('input', newValue);
},
},
};
</script>
이렇게 커스텀 컴포넌트에서 v-model을 사용할 때 만약에 자식 컴포넌트의 template에 input 태그 같은 게 없으면 사용 못 하는 건가요?
답변 1
0
짐코딩
지식공유자
안녕하세요.
Q) v-model을 사용할 때 만약에 자식 컴포넌트의 template에 input 태그 같은 게 없으면 사용 못 하는 건가요?
아니요 v-model은 input 태그와 관계 없이 사용할 수 있습니다. 아래 다양한 예제가 있으니 참고하시면 좋을 것 같아요.
https://vuejs.org/guide/components/v-model.html
짐코딩
지식공유자
안녕하세요.
modelValue props와 update:modelValue emits을 잘 활용하시면 되는데요 아래 간단한 예제입니다.
// App.vue (부모 컴포넌트)
<template>
<div>
<Counter v-model="counter" />
<button @click="counter++">parent click!!</button>
</div>
</template>
<script setup>
import Counter from './components/Counter.vue';
import { ref } from 'vue';
const counter = ref(0);
</script>// Counter.vue (자식 컴포넌트)
<template>
<button @click="$emit('update:modelValue', modelValue + 1)">Click!! {{ modelValue }}</button>
</template>
<script setup>
defineProps({
modelValue: {
type: Number
}
})
defineEmits(['update:modelValue'])
</script>
https://vuejs.org/guide/components/v-model.html 에서는 input 태그 없이 v-model을 사용하는 예시가 없는데 혹시
input, checkbox, select/option 같은 태그 없이 <컴포넌트 v-model> 을 사용하는 예시를 들어주실 수 있나요?