カスタムコンポーネントでv-model使いたいのに難しくない？
公式のドキュメントをみてもパッと見つからないし、いろんなゴリ押し代替案があってコードが煩雑になる…
と思いきやカスタムコンポーネントでもきちんとv-modelを利用する綺麗な手法がありました。
ほぼ備忘録的な記事ですが、お役に立てれば幸いです。
手順
すっ飛ばして見たい方はchildComponent.vueのコードを参照してください。
modelプロパティという物が公式の機能にありました…いつ実装されたんだろうか。
ともかくこれをコンポーネント内で使います。
parentComponent.vue内でchildComponent.vueを使う構成です。
parentComponent.vue
<template>
<div class="parentComponent">
<childComponent v-model="modelvalue" />
</div>
</template>
<script>
import childComponent from 'path/to/childComponent'
export default {
components: {
childComponent,
},
data() {
return {
modelvalue: 'このプロパティをコンポーネント間で授受します。',
}
},
}
</script>
childComponent.vue
<template>
<div class="childComponent">
<input @input="emitValue" :value="modelvalue" />
</div>
</template>
<script>
export default {
//以下のmodelプロパティが今回の主役です。
model: {
prop: 'modelvalue',
event: 'emit-text'
},
//propsプロパティにmodelプロパティ内で指定したプロパティを作成
props: {
modelvalue: {
type: String //お好みのデータ型で
}
},
methods: {
emitText(e) {
//modelプロパティで指定したイベントをthis.$emitメソッドで飛ばします。
this.$emit('emit-text', e.target.value)
},
}
}
</script>
ちなみにtextarea要素でも同様に動作します。textarea要素には本来、value属性はありませんが上記のinput要素と同じようにvalueへmodelvalueをバインドすることでv-modelを利用できます。
注意点
- 上のコードを利用する場合、
childComponent.vueのinputタグ内にあるemitValueをemitValue()と記述しないようにしてください。イベントがメソッドに渡されず動きません。 -
childComponent.vueのmodelプロパティのprop、eventの値は文字列で指定してください。