Vue3의 v-model 단수에 익숙하지 않아요.

6187 단어 Vue.jstech
Vue2 시대v-model의 상당한 기능은 Vue3에서 이런 규격으로 바뀌었다.
코드는 정부측doc에서 발췌한 것이다.
https://v3.vuejs.org/guide/migration/v-model.html#_3-x-syntax
사용
<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시스템 요소와 같은 사용 느낌을 주고 싶은 경우가 많을 것이다.그래서 전혀 사용하지 않는 방향으로 쓰러지는 것도 불편하다.

좋은 웹페이지 즐겨찾기