defineSlots()とdefineOptions()
ここからは、新機能リストで紹介していない6と7について、まとめて紹介します。
Slot Propsの型定義ができるdefineSlots()
まず、新機能リスト6のdefineSlots()です。これは、スコープ付きSlotにおいて、Slot Propsの構成要素を定義できる仕組みです。例えば、リスト4のようなコンポーネントがあったとします。
<script setup lang="ts"> : const memberInfo = reactive({ // (1) name: "田中太郎", state: "問題発生。" }); const problemsInit: string[] = ["電話が通じません。", "留守です。"]; // (2) const problems = ref(problemsInit); </script> <template> <section> <slot v-bind:memberName="memberInfo.name" v-bind:memberState="memberInfo.state"> // (3) <p>問題ありません</p> </slot> <slot name="detail" v-bind:memberProblems="problems"> // (4) <p>特にありません。</p> </slot> </section> </template>
リスト4の(3)のデフォルトSlotのSlot Propsは、memberNameとmemberStateであり、その値は(1)からもわかるように文字列です。一方、(4)のdetail SlotのSlot PropsはmemberProblemsのみであり、その値は(2)からわかるように文字列配列です。
このようなスコープ付きSlotを定義する際、そのSlots Propsとして、どのような名称のどのようなデータ型が必要なのかを、これまで定義する方法がありませんでした。これを実現したのがdefineSlots()マクロです。リスト4のスクリプトブロックに、リスト5のようなコードを追記することで、Slot Propsが定義できます。
type SlotsProps = { default?: (props: {memberName: string, memberState: string}) => any; detail?: (props: {memberProblems: string[]}) => any; }; defineSlots<SlotsProps>();
defineSlots()マクロのジェネリクスの型定義として記述するコードを構文としてまとめると、次のようになります。
type SlotsProps = { Slot名?: (props: {Slot Prop名: データ型, …}) => any; : }; defineSlots<SlotsProps>();
この定義により、もし定義以外のSlot Propsを記述すると、図3のようなエラー表示となります。
オプション設定ができるdefineOptions()
次に紹介するのは、新機能リスト7のdefineOptions()です。Vue.js本体のinheritAttrs属性を始めとして、外部モジュールなどが指定する属性によっては、Options API方式でなければ設定できないもの、つまり、script setupタグ内では設定できないものがあります。これらの設定が必要な場合は、これまでは、リスト6のように、scriptタグとscript setupタグの両方を記述する必要がありました。
<script> export default { inheritAttrs: false } </script> <script setup> import {ref} from "vue"; : </script>
このOptions APIでなければ設定できないオプションをscript setupタグ内で記述できるようにしたのが、defineOptions()マクロです。このdefineOptions()を利用すると、リスト6のコードは、リスト7のようなコードで済むようになります。
<script setup> import {ref} from "vue"; defineOptions({ inheritAttrs: false }); : </script>