はじめに
こんばんは。 かんたんな備忘録ですが、vue3では初めて書いたので残しておきます。
本題
propsのデータを 子コンポーネントに存在するフォームのmodelで使用したい
そして、変更の結果を emitしたいみたいなパターンで使ってます。
vue2 ではこんな感じで使ってました。
vue2
props: { item: { type: String, required: true } }, computed: { computedItem: { get() { return this.item }, set(value) { this.$emit('changeItem', value) } } }
それをvue3ではこんな表現します。
vue3
const props = defineProps({ item: { type: String, required: true } }) const emit = defineEmits(['changeItem']) const computedItem = computed({ get: () => props.item.value, set: (value) => emit('changeItem', value) })
vue3まだ慣れてないので、個人的にはまだvue2のほうが書き方的に慣れてますが、そのうち慣れてくのかな?
終わりに
最近うまく勉強できない日が続いています。
できないことでテンションを下げちゃっているのですが、できない自分を認めて、できるところからやっていこうと思います。
現場からは以上です。