【Vue + Typescript】親コンポーネントとのやりとりには@VModelを使おう

はじめに

v-modelの親子間伝達はvue-property-decoratorの@VModelを使うと簡単だよ、というお話です。
例がネット上に転がってなかったので、メモ程度に残しておきます。

前提

@vue/cliの初期化時にtypescriptを指定していれば新しく追加するものはありません。

• typescript
• vue-class-component
• vue-property-decorator

よくあるやり方

例

ChildComponent

<template>
    <div>
        <input type="text" v-model="text"/>
    </div>
</template>

<script lang="ts">
import {Vue, Component, VModel} from 'vue-property-decorator'

@Component
export default class ChildComponent extends Vue{
    @VModel({type:String})
    text!:string
}
</script>

ParentComponent

<template>
    <div>
        <child-component v-model="text" />
    </div>
</template>

<script lang="ts">
import { Component, Vue} from 'vue-property-decorator'
import ChildComponent from 'ChildComponent.vue'

@Component({
        components: {
            ChildComponent
        }
    })
export default class ParentComponent extends Vue{
    private text: string = 'aaa'
}
</script>

注意点

通常のpropsと異なり、親もv-modelでバインドする必要があります。

<!--下の書き方はOK-->
<input type="text" v-model="text"/>
<!--下の書き方はNG-->
<input type="text" :text="text"/>

以上。