Vue 3에서 v-model 작업
5020 단어 vuetypescriptjavascript
<script setup>
를 사용하여 Vue 3 + Composition API에서 v-model로 작업하는 방법을 보여줄 것입니다. 작업할 수 있는 방법이 거의 없습니다. 살펴보겠습니다!우선 우리는 항상 커스텀 소품을 생성하고 상위 구성 요소에 대해 방출해야 합니다.
1 - modelValue 소품 생성 및 업데이트 내보내기(자식 구성 요소)
<script setup>
defineProps({
modelValue: String
});
let emit = defineEmits(['update:modelValue']);
</script>
Note: 'update:modelValue' can't be changed on next steps, otherwise the emit event wont work.
2 - 방출 이벤트 발생(자식 구성 요소)
이 경우 텍스트 영역을 사용하여 이를 수행하지만 입력과 함께 사용할 수도 있습니다.
<template>
<textarea
@keyup="emit('update:modelValue', $event.target.value)"
v-text="modelValue"
/>
</template>
3 - 사용자 지정 구성 요소(상위 구성 요소) 사용
이제 사용자 지정 구성 요소를 호출하고 v-모델을 전달할 수 있습니다.
<MyFancyTextArea v-model="comment" />
Typescript와 함께 사용
v-model w/Typescript 사용은 매우 간단합니다. 아래 예를 살펴보십시오.
<script setup lang="ts">
defineProps<{
modelValue: string,
}>()
const emit = defineEmits<{
(event: 'update:modelValue', payload: string): void;
}>();
</script>
<template>
<input
@input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
/>
</template>
그게 다야!
v-model 사용에 대한 자세한 내용을 읽고 알아보려면 Vue 3 official documentation about it을 방문하십시오.
안녕!
이 게시물에 대한 참조:
https://blog.q-bit.me/an-introduction-to-vue-3-typescript-component-properties-and-events/
https://vuejs.org/guide/components/events.html#usage-with-v-model
Reference
이 문제에 관하여(Vue 3에서 v-model 작업), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/caio2k/working-with-v-model-in-vue-3-3791텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)