初心者から見たVue3コンポーネントの実装のしやすさについて Vision.6

Vue3コンポーネントの実装のしやすさについて Vision.6

Vue3のコンポーネントの実装について、前回はVue3コンポーネントの詳細から、
グローバル登録について、まとめました。

前回：グローバル登録

今回は、ローカル登録を以下にまとめます。

Vue3のコンポーネントの詳細2

公式ページ：ローカル登録を読み進めながら、以下のように解釈。

ローカル登録(Local Registration): 単一ファイルコンポーネントのローカル登録は
既にVue3のコンポーネントの基礎1の段階で記述した通り、<script setup>と共に使用する例が以下の通りとなります。

anyComponent.vue

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>

上記の場合、インポートしたコンポーネントは登録なしで使用可能になります。

<script setup>を用いない場合は、以下のようにcomponentsオプションを
使用する必要があります。

anyComponent.vue

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}

componentsオブジェクトのプロパティそれぞれについて、キーがコンポーネントの
登録名になります。そして、値にコンポーネントの実装が保持されます。
上の例では ES2015 のプロパティの省略記法を使っていて、これは次の表記と等価です。

anyComponent.vue

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

このプロパティの省略記法は良く使いますが、よくよく考えてみると
ECMAScript言語仕様に記載されている、どの部分なのか根拠付けが難しいですね。
12.2.6 Object Initializer以降のオブジェクトの初期化、名称決定に関する一連の記述かなと
ふわっと思うレベルです。

次回：propsの宣言について