Vueコンポーネント同士を連携する。
〜contents〜
- v-model
- Emit(引数付)
TextBoxコンポーネントから学ぶv-modelディレクティブ
親コンポーネント(Form)
<template>
<div>
<TextBox placeholder="山田 太郎" :message="message" @updatedInputValue="checkInputValue" />
<Button value="決定" :disabled="disabled" @Clicked="click"/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TextBox from '@/components/TextBox.vue'
import Button from '@/components/Button.vue'
@Component({
components:{
TextBox,
Button,
RadioButton
}
})
export default class Form extends Vue {
private name: string = ""
private disabled: boolean = false
private message: string = ""
private click(): void{
this.disabled = true
console.log("I'm parent")
}
private checkInputValue(val: string){
this.name = val
console.log("入力：" + this.name)
if (this.name.length > 10 || this.name.length < 1){
this.message = "ユーザ名は1〜10文字です。"
this.disabled = true
} else {
this.message = ""
this.disabled = false
}
}
}
</script>
子コンポーネント(TextBox)
<template>
<div>
<input type="text" :placeholder="placeholder" v-model="inputValue">
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class TextBox extends Vue {
private inputValue: string = ""
@Prop()
private placeholder: string
</script>
v-model
双方向バインディング。v-modelとは、v-bindとv-onをまとめて記述した糖衣構文（まとめただけで等価であるということ）である。すなわち、v-modelに指定したvalueは、<script>で定義された変数と連動する。
今回のようにで使用すると、<script>内で受けたvalueの変更は入力欄へも反映され、逆に入力欄への入力は<script>の変数valueにも変更を与える。
糖衣構文(上と下では同じこと)
<input type="text" v-model="inputValue">
<input type="text" v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">
今回のようにテキスト入力された情報を子コンポーネントだけで持っていてもしょうがないので、変更とともに随時親コンポーネントに通知するようにしたい。ここで、v-onの方は式であり自由に書き換えられることに着目する。
inputイベントを受けて親コンポーネントへEmitする関数をコールし、引数として親へ入力内容を渡そう。
ただし、typescriptではjsのように$event.target.valueで入力を拾おうとするとエラーがでる。次のように1step踏んで解決*1。ちなみに、event!としているのはそうしないとundefindの可能性があるよとエラーが出る(？)ので*2
参考1) https://yuutookun.hatenablog.com/entry/2018/07/21/084912
参考2) https://teratail.com/questions/130598
Emitする際に引数を渡す。
親コンポーネント(Form)
<template>
<div>
<TextBox @updatedInputValue="checkInputValue" />
<Button value="決定" :disabled="disabled" @Clicked="click"/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TextBox from '@/components/TextBox.vue'
import Button from '@/components/Button.vue'
@Component({
components:{
TextBox,
Button
}
})
export default class Form extends Vue {
private inputValue: string = ""
private checkInputValue(val: string){
this.inputValue = val
console.log("入力：" + this.inputValue)
}
}
</script>
子コンポーネント(TextBox)
<template>
<div>
<input type="text" :value="inputValue" @input="updateValue" >
</div>
</template>
<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator';
@Component
export default class TextBox extends Vue {
private inputValue: string = ""
// 同名のイベント名でもここは省略不可。
//ここでイベント名を指定しないと、親コンポーネントでイベント名は'updatedInputValue'ではなく、
//'updatedinputvalue'または'updated-input-value'に変わられてしまうそうです。
//詳細はVUEガイドの「カスタムイベント・イベント名」を参照してください。
@Emit('updatedInputValue')
private updatedInputValue(val: string): void{
}
private updateValue():void{
if (event!.target instanceof HTMLInputElement) {
this.inputValue = event!.target.value;
this.updatedInputValue(this.inputValue);
}
}
}
</script>
親コンポーネントはEmitで指定したイベントにコールする関数を紐づけることで連携できる。
上記の流れで、<input>に入力されるとinputイベントが発火し、続いてEmitで指定するイベントが発火、親コンポーネントの関数がコールされるといった流れ。
各コンポーネントを結合する。
最後に2つのコンポーネントを連携する。
TextBoxへの入力のバリデーションチェックを行い、決定不可のケースではdisabledフラグをtrueにし、Buttonを使用不可な状態に切り替える。
Form.vue(親)
<template>
<div>
<TextBox placeholder="ユーザ名" :message="message" @updatedInputValue="checkInputValue" />
<Button value="決定" :disabled="disabled" @Clicked="click"/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TextBox from '@/components/TextBox.vue'
import Button from '@/components/Button.vue'
@Component({
components:{
TextBox,
Button
}
})
export default class Form extends Vue {
private inputValue: string = ""
private disabled: boolean = false
private message: string = ""
private click(): void{
this.disabled = true
console.log("I'm parent")
}
private checkInputValue(val: string){
this.inputValue = val
console.log("入力：" + this.inputValue)
if (this.inputValue.length > 10 || this.inputValue.length < 1){
this.message = "ユーザ名は1〜10文字です。"
this.disabled = true
} else {
this.message = ""
this.disabled = false
}
}
}
</script>
TextBox.vue(子)
<template>
<div>
<input type="text" :placeholder="placeholder" :value="inputValue" @input="updateValue" >
<p>{{message}}</p>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
@Component
export default class TextBox extends Vue {
private inputValue: string = ""
@Prop()
private placeholder: string
@Prop()
private message: string
@Emit('updatedInputValue')
private updatedInputValue(val: string): void{
}
private updateValue():void{
if (event!.target instanceof HTMLInputElement) {
this.inputValue = event!.target.value;
this.updatedInputValue(this.inputValue);
}
}
}
</script>
Button.vue(子)
<template>
<div>
<button class="button" :class="{disabled}" @click="onClick">{{value}}</button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
@Component
export default class Button extends Vue {
@Prop()
private value: string
@Prop()
private disabled: boolean
private onClick():void {
if (!(this.disabled)){
this.Clicked()
}
}
//Emitの引数のイベント名はメソッド名と同じ場合は省略可能。この場合省可能
@Emit('Clicked')
private Clicked():void {
console.log("I'm child")
}
}
</script>
<style scoped lang="scss">
.button{
text-align : center;
background-color : #f0b434;
cursor : pointer;
border : solid 1px;
float : center;
}
.disabled{
background-color : #7d837d;
}
</style>
完成品
