Vue3コンポーネントの実装のしやすさについて Vision.2
Vue3のコンポーネントの実装について、前回はVue3コンポーネントの概略から、
単一ファイルコンポーネントと子コンポーネントについて、
シンプルな実装を体験しました。
前回：親コンポーネントと子コンポーネントについて
今回は、propsの受け渡しとイベントの購読を以下にまとめます。
Vue3のコンポーネントの基礎2
公式ページ：コンポーネントの基礎を読み進めながら、以下のように解釈。
-
propsの受け渡し(Passing Props): コンポーネントに登録できるカスタム属性。
definePropsマクロをscript setup内で使用することで、
あるコンポーネントから、別のコンポーネントに任意のパラメータを
渡すことができます。
「コンポーネントの基礎」ページ内では、コンポーネントの初期化時に
必要なパラメータを渡すことができる機能と見られますが、propsの完全ガイド
という別ページが存在していますので、本記事でも別途、追いたいと思います。 -
イベントの購読(Listening to Events): コンポーネントに登録できるカスタムイベント。
propsがコンポーネントのパラメータとして定義できたことと同様
コンポーネントのイベント（振る舞い）も定義することができます。
「コンポーネントの基礎」ページ内では、親コンポーネントで定義したイベントを
子コンポーネントから実行できるような例を記載しています。defineEmitsマクロをscript setup内で使用することで親コンポーネントの
任意のイベントを、子コンポーネント側で実行させられます。
こちらもカスタムイベントの完全ガイドという別ページが存在していますので
別途、追いたいと思います。
なんかこう、直感的な言い方じゃないというか、プロパティ定義とイベント定義という
記載の方がすっと読める気がして、「コンポーネントの基礎」ページの記載では、
認知負荷を感じますね。
実装してみた
defineProps および defineEmits
子コンポーネント
definePropsで定義したmsgをh4フォントで表示されるように実装しています。
親コンポーネントからmsgに対応する文字列が渡される想定です。
また、defineEmitsについて、親コンポーネントで定義したenlarge-textイベントを設定
ボタンのクリックイベントでenlarge-textイベントが実行されるようにしています。
親コンポーネント
公式サンプルを見てみると、refというオブジェクトが必要と伺えますが、
この時点では、詳細が分かりません。別途、追いたいと思います。
ひとまず、今回の目的であるイベントの実行ができるかを優先して確認します。
動作実験
設置した「Enlarge text」ボタンを連打すると
確かに親コンポーネントで定義したイベントが実行され、表示文字列のフォントが
大きくなったことを確認できました。
まだ簡単に実装できる範囲ですね。
気になった点はdefinePropsの書き方が現時点で2種類ある点です。
<script setup>
defineProps(['title'])
</script>
もう一方
<script setup>
defineProps<{
title: string
}>()
</script>
現時点では、後者の書き方では型指定が行えて、numberでもbooleanでも
対応できました。前者はstring特化に見えます。
追記
definePropsの書き方は3種類あるとコメント頂きました。propsの完全ガイドを含む今後の体験で深掘りできるようなので、一通り学んだあと、本記事の修正も含めて対応したいと思います。
次回：スロットを使ったコンテンツ配信と動的コンポーネントについて