Vue3의 v-model 단수에 익숙하지 않아요.
v-model
의 상당한 기능은 Vue3에서 이런 규격으로 바뀌었다.코드는 정부측doc에서 발췌한 것이다.
사용
<ChildComponent v-model="pageTitle" />
<!-- would be shorthand for: -->
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>
v-model
의 부측의 사용감은 큰 변화가 없다.그러나 자방의 기법은 크게 달라졌다.export default {
props: {
modelValue: String
},
emits: ['update:modelValue'],
methods: {
changePageTitle(title) {
this.$emit('update:modelValue', title)
}
}
}
modelValue
,길다.몇 번이나 썼는데, 매번 doc를 다시 읽는 것을 잊어버렸다.나는 Vue3의
v-model
기법은 쓰고 싶어서v-model
라고 해서 그렇게 미리 준비하는 것보다 쓰고 싶어서v-model
도 쓸 수 있는 스타일을 고려하는 것이 낫다고 생각한다.뭐랄까, 짧은 손
v-model
을 사용하기 위해 준비한 것modelValue
과 같은 특별한 것props
이 아니라 용도에 따라 이름을 미리 준비하는 것이 일반적이다.export default {
props: {
text: String
},
emits: ['update:text'],
methods: {
changePageTitle(title) {
this.$emit('update:text', title)
}
}
}
부측은 이름 지정에 사용v-model
.<ChildComponent v-model:text="pageTitle" />
<ChildComponent
:text="pageTitle"
@update:text="pageTitle = $event"
/>
는 이름이 상속v-model
됐지만 실제로는 Vue2 시대v-model
보다 **.sync
기재법의 상속에 가깝다.억지로
v-model
단거리수modelValue
를 사용하지 않는다면 갑자기 끓어오르는 존재를 의식하지 못할 것이다.그러나 form시스템 구성 요소
v-model
는 짧은 손으로 만들어서 원래의 form시스템 요소와 같은 사용 느낌을 주고 싶은 경우가 많을 것이다.그래서 전혀 사용하지 않는 방향으로 쓰러지는 것도 불편하다.
Reference
이 문제에 관하여(Vue3의 v-model 단수에 익숙하지 않아요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/miyanokomiya/articles/76bc7b48fbc614텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)