前回に引き続き、今回もVue.jsのComposition APIでTypeScriptを使った環境で、SPAを作るための状態管理やルーティングなどを使えるようにしていく方法を見ていきます。第2回目はコンポーネントの作成と、PropsやEmitを使ってコンポーネント間の値やイベントの受け渡しを行なっていきます。ここまでの準備や開発環境については、前回記事「Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃1：環境構築」をご参考ください。   今回のコンポーネント化にあたってソースコードのファイルはこのような構成で、サンプルとして簡単なチェックリストアプリを作成してみたいと思います。チェックを入れた指定の項目をボタンクリックでフィルタリングする機能を想定しています。チェック入力用のリストとリスト項目要素、出力結果用のリストとリスト項目要素、そしてイベントを設定する更新用のボタン要素の5つのコンポーネントに細分化します。（その他ファイルについては前回記事の内容を使用する前提になっています）

........
┣ src
  ┗ ts
    ┣ main.ts
    ┗ vue
      ┣ app.vue
      ┗ components
        ┣ ListDraft.vue
        ┣ ItemDraft.vue
        ┣ ListOfficial.vue
        ┣ ItemOfficial.vue
        ┗ UpdateButton.vue

  まずは親コンポーネントから見ていきます。子コンポーネントや孫コンポーネントに受け渡す用のデータを定義し、呼び出したあ子コンポーネントへPropsとして渡していきます。また、Emitでカスタムイベントを定義したコンポーネントからイベントを発火させるようにしています。受け渡すデータに関してはそれぞれ型定義をしておきます。 【app.vue】※親コンポーネント

<template>
  <section>
    <list-draft :props-items="data.draftItems" />
    <list-official :props-items="data.officialItems" />
  </section>
  <update-button @update-items="update()" />
</template>

<script lang="ts" setup>
  import { reactive, computed } from 'vue';
  import ListDraft from './components/ListDraft.vue';
  import ListOfficial from './components/ListOfficial.vue';
  import UpdateButton from './components/UpdateButton.vue';
  interface dataInterface {
    draftItems: { id: number; isChecked: boolean; title: string; }[],
    officialItems: { id: number; isChecked: boolean; title: string; }[]
  } 
  const data:dataInterface = reactive({ 
    draftItems: [
      {
        id: 1,
        isChecked: false,
        title: 'チェック項目1'
      },
      {
        id: 2,
        isChecked: true,
        title: 'チェック項目2'
      },
      {
        id: 3,
        isChecked: false,
        title: 'チェック項目3'
      },
    ],
    officialItems: []
  });
  const checkedItems = computed(() => {
    return data.draftItems.filter((item) => {
      return item.isChecked
    })
  });
  const update = () => {
    data.officialItems = checkedItems.value;
  }
</script>

  また、今回は「setup構文」を使ってシンプルに処理を書けるようにしています。詳しくは後述しますが、scriptタグに「setup」属性を設定することで、defineComponent()の関数や、コンポーネントのオプションなどが省略でき、かなりすっきりとさせることができます。Composition APIで.vueファイルを扱う場合にはぜひ使っておきたいですね。   その形に合わせて他のコンポーネントも用意していきます。子コンポーネントや孫コンポーネントになるので、PropsやEmitを使うのですが、setup構文では少し記述が異なるので注意が必要です。 【components/ListDraft.vue & components/ListOfficial.vue】※子コンポーネント

// ListDraft.vue
<template>
  <div>
    <h2>項目リスト</h2>
    <ul>
      <item-draft v-for="item in props.propsItems" :key="item.id" :props-item="item" />
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import ItemDraft from './ItemDraft.vue';
  interface propsInterface {
    id: number
    isChecked: boolean
    title: string
  } 
  const props = defineProps<{
    propsItems: () => propsInterface[]
  }>();
</script>


// ListOfficial.vue
<template>
  <div>
    <h2>確定済み項目</h2>
    <ul>
      <item-official v-for="item in props.propsItems" :key="item.id" :props-item="item" />
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import ItemOfficial from './ItemOfficial.vue';
  interface propsInterface {
    id: number
    isChecked: boolean
    title: string
  } 
  const props = defineProps<{
    propsItems: () => propsInterface[]
  }>();
</script>

  【components/ItemDraft.vue & components/ItemOfficial.vue】※孫コンポーネント

// ItemDraft.vue
<template>
  <li>
    <label>
      <input v-model="data.isChecked" type="checkbox" name="check_list_item" />
      <span>{{ data.title }}</span>
    </label>
  </li>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  interface propsInterface {
    id: number
    isChecked: boolean
    title: string
  } 
  const props = defineProps<{
    propsItem: () => propsInterface
  }>();
  const data = reactive(props.propsItem);
</script>


// ItemOfficial.vue
<template>
  <li>
    <span>{{ data.title }}</span>
  </li>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  interface propsInterface {
    id: number
    isChecked: boolean
    title: string
  } 
  const props = defineProps<{
    propsItem: () => propsInterface
  }>();
  const data = reactive(props.propsItem);
</script>

  【components/UpdateButton.vue 】※カスタムイベントを作成、親コンポーネントでイベント発火

<template>
  <button @click="emitUpdate()">リスト更新</button>
</template>

<script lang="ts" setup>
  interface emitInterface {
    (event: 'update-items', payload: null): void
  } 
  const emit = defineEmits<emitInterface>();
  const emitUpdate = (): void => {
    emit('update-items', null);
  };
</script>

   

setup構文を使ったPropsとEmitの定義

setup構文を使うことでPropsやEmitの記述方法が変わります。Propsは「defineProps()」を、Emitの方は「defineEmits()」を使って定義していく形になります。型指定なども型引数として受け取ることができるので、TypeScriptの場合にはこちらの方がわかりやすくなっていますね。また、Propsの初期値を合わせて設定する場合には「withDefaults()」を使います。withDefaultsの第二引数に初期値を指定します。

// 通常（setup構文なし）
<script lang="ts">
  import { defineComponent } from 'vue';
  import ItemOfficial from './ItemOfficial.vue';
  export default defineComponent({
    components: {
      ItemOfficial
    },
    props: {
      propsItems : {
        type: () => [],
        default: []
      }
    },
    setup(props) {
      return {
      }
    }
  });
</script>


// setup構文
<script lang="ts" setup>
  import ItemDraft from './ItemDraft.vue';
  interface propsInterface {
    id: number
    isChecked: boolean
    title: string
  } 
  const props = withDefaults(defineProps<{
    propsItems: () => propsInterface[]
  }>(), {});
</script>

  Emitの方もPropsと同じような形で定義していきます。第一引数にはカスタムイベント名を、第二引数には受け渡す値を指定しますが、値がない場合には省略することもできます。

// 通常（setup構文なし）
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    emits: [
      'update-items'
    ],
    setup(props, context) {
      const emitUpdate = (): void => {
        context.emit('update-items', null);
      };
      return {
        emitUpdate
      }
    }
  });
</script>


// setup構文
<script lang="ts" setup>
  interface emitInterface {
    (event: 'update-items', payload: null): void
  } 
  const emit = defineEmits<emitInterface>();
  const emitUpdate = (): void => {
    emit('update-items', null);
  };
</script>

 

---

  今回は複数のコンポーネントとコンポーネント間での値やイベントの受け渡しについてまとめてみました。コンポーネントの構造や受け渡す値などがシンプルであれば、この形でも問題なさそうですが、大規模なアプリケーションではコンポーネントの数が多くなってきたり、コンポーネント間での値受け渡しが困難になるケースもあります。そんな場合には状態管理で値を扱っていく形になりますが、その辺りについてまた次回記事でまとめてみたいと思います。   （こちらの記事も合わせてどうぞ） Vue.js（Composition API）＋TypeScriptの環境でVuex・Vue Router・axiosを使ってみる＃1：環境構築