[ Vue3 + TypeScript ] 子コンポーネントで実装したドロップダウンで選択した内容をリアクティブに親コンポーネントと連携する方法

リアクティブなアプリケーションを再利用可能で独立したコンポーネントと言う概念を使ってが容易に実装できるのが Vue.js の利点の一つだといえます。このコンポーネントの利点を活かすために各コンポーネントをあまり大きなサイズにしないことが一つのポイントになってきます。一方で単一のコンポーネント内部でリアクティブに実現できていた機能をコンポーネントに分割して実現しようとするとコンポーネント間でデータのやりとりを実現する必要があります。

本記事では通常ツリー構造となるコンポーネントの「親コンポーネントから子コンポーネント」、「子コンポーネントから親コンポーネント」のそれぞれについてリアクティブなデータのやりとりを TypeScript で実現する方法についてドロップボックス (Select) を例に用いて整理していきます。

macOS: 12.3
vue: 3.2.31
typescript: 4.5.5
vue3 API: Composition API
bootstrap: 5.1.3

Vue3 + TypeScript + Bootstrap5 プロジェクトの準備

[ads]

今回の記事で使用するプロジェクトを用意します。

npm int vue@3 を使ってプロジェクト作成
TypeScript を有効にする
bootstrap5 をインストール

参考記事：

親コンポーネント (App.vue)

create-vue で作成されたプロジェクトに存在する App.vue を親コンポーネントとして利用します。以下のように子コンポーネントとして新規に作成する Child.vue をインポートしそれを template で呼び出す形にします。 style については、プロジェクト作成時から変更しないため、割愛しています。

<script setup lang="ts">
import Child from './components/Child.vue'
</script>
 
<template>
 <div>
   <Child />
 </div>
</template>

子コンポーネント (Child.vue)

続いて子コンポーネントを準備します。 src / components に新規ファイルとして以下の内容で Child.vue ファイルを作成します。

template には、Bootstrap5 の公式サイトのサンプルを引用してきています。

<script setup lang="ts">
</script>
 
<template>
   <div>
       <select class="form-select" aria-label="Default select example">
           <option selected>Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
       </select>
   </div>
</template>

その他

Bootstrap5 を使うために main.ts に以下の1行を追加します。

import { createApp } from 'vue'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
 
createApp(App).mount('#app')

この段階でのアプリ動作

特に各コンポーネントにプロパティもない状態でドロップダウンが動いている状態です。

次のステップでは親コンポーネントである App.vue に設置したコンテンツの内容に応じて、子コンポーネントに設置したドロップボックス (Select) の値をリアクティブに変化させてみます。

親から子へデータを連携する (Props)

[ads]

子コンポーネントにドロップダウンと連動するプロパティ追加

まずは準備として Child.vue にドロップダウンと連動するプロパティを defineProps を用いて追加していきます。

<script setup lang="ts">
defineProps(['modelValue'])
</script>
 
<template>
   <div>
       <select
           class="form-select"
           aria-label="Default select example"
           v-model="modelValue">
           <option selected>Open this select menu</option>
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
       </select>
   </div>
</template>

ドロップダウンの選択に応じて値が変化するプロパティ modelValue を実装し、期待通り動作していることが分かります。

なお、この段階では modelValue という名称でなくても問題ありませんが、親コンポーネントと連携する際には modelValue 以外の名称だとうまくいきませんので、注意してください。ここでは親コンポーネントとの連携も見据えて modelValue という名称で進めていきます。

参考：
https://vuejs.org/guide/components/events.html#v-model-arguments

親コンポーネントに子コンポーネントと連動する変数とその変数を変化させるテキストボックスを追加

親コンポーネントの App.vue に子コンポーネントと連動する ref オブジェクトの変数 item を追加します。ドロップダウンの初期値として “One” が表示されるように値は 1 としています。

同時に、この item を v-model に指定したテキストボックスを追加します。ここで入力した値を子コンポーネントに連携させてみます。

<script setup lang="ts">
import { ref } from 'vue'
import Child from './components/Child.vue'
 
const item = ref('1')
</script>
 
<template>
 <div>
   Parent:
   <input v-model="item" />
   <hr />Child:
   <Child v-model="item" />
 </div>
</template>

早速このコードを動かし、テキストボックスに値を入力してみます。

親コンポーネントに実装したテキストボックスに値を入力するとそれに対応した子コンポーネントのドロップダウンが変化していることが分かります。 親コンポーネントの変数の値が Child コンポーネントでの v-model で子コンポーネント側へリアクティブに連携されているためです。

次のステップでは、ドロップボックスの選択に合わせてテキストボックスの内容を変化させてみます。つまり今の実装とは逆で「子コンポーネントから親コンポーネントへデータを連携」するという流れになります。

子コンポーネントから親コンポーネントへデータを連携する (Emit)

[ads]

先ほどの状態でドロップダウンから値を選択してみても、親コンポーネントのテキストボックスの値は変わりません。

先ほど、実装した処理はあくまで親から子への一方通行の連携だからです。それでは子から親へのデータ連携を実装してみます。子から親へのデータ連携には Emit という機能を用います。

Emit の実装

まずは Emit 処理を defineEmits を用いて定義します。ここでも defineProps での modelValue と同様に update:modelValue と言う名称で定義してください。それ以外の名称ですと親に連携することができません。

<script setup lang="ts">
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

続いて定義した Emit を呼び出す部分を実装します。今回はドロップダウンですので select タグに @change を追加することでドロップダウンを選択する都度 Emit を呼び出し親へ連携していこうと思います。

       <select
           class="form-select"
           aria-label="Default select example"
           v-model="modelValue"
           @change="$emit('update:modelValue', $event.target.value)"
       >

$event.target.value を emit の引数とすることで option タグの value で指定した値が親に連携されることになります。

それでは早速この状態で実行していきます。

無事、 子コンポーネントで実装したドロップダウンで選択した項目に対応した値が親コンポーネントで実装したテキストボックスに反映されています。先ほど実装した親から子への実装も引き続き有効ですのでこれで双方向のデータ連携が完成しました。

補足 Object is possibly ‘null’.ts(2531) への対応

ここまでのコードで目的の機能を実装することができましたが、実は以下の TypeScript Warning が出力されています。

Object is possibly 'null'.ts(2531)

これは tsconfig.json で以下のいずれかの設定をしている場合に出力されるためです。これらをいずれも false にすれば出力されなくなりますが、せっかくの警告が抑制されてしまうので、やはり根本解決してみることにします。

“strict“: true
“noImplicitAny“: true

Type Annotations を明示する (HTMLSelectElement)

警告の原因は Type Annotations を省略しているため、暗黙的に any 型と判断されていることにあります。ですので、明示的に Type Annotations を記載することで警告に対応することができます。 TypeScript 公式サイトでも「any は型チェックできないため基本的に避けるべき」と説明されています。

select エレメントでは HTMLSelectElement インターフェースを用いることになりますのでこの HTMLSelectElement を明示的にコードに記載していきます。

       <select
           class="form-select"
           aria-label="Default select example"
           v-model="modelValue"
           @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
       >

このように記載することで実装した機能の動作はそのままに TypeScript の警告が表示されなくなります。

参考：
https://vuejs.org/guide/typescript/composition-api.html#typing-event-handlers

まとめ

[ads]

親 -> 子 defineProps を用いる

modelValue という名称を使う

子 -> 親 defineEmits を用いる

update:modelValue という名称を使う

Object is possibly 'null' へ対応するためには Type Annotation を明示する (ここでは HTMLSelectElement)

[ads]

今回使用したサンプルコード

App.vue

<script setup lang="ts">
import { ref } from 'vue'
import Child from './components/Child.vue'

const item = ref('1')
</script>

<template>
  <div>
    Parent:
    <input v-model="item" />
    <hr />Child:
    <Child v-model="item" />
  </div>
</template>

Child.vue

<script setup lang="ts">
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
    <div>
        <select
            class="form-select"
            aria-label="Default select example"
            v-model="modelValue"
            @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
        >
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
</template>

[ads]