vue3.3 の最新リリース、defineProps、ジェネリック、defineEmits、defineSlots チュートリアル
記事ディレクトリ
以下の内容は、現在のvue3.3バージョンで公開されている内容をより詳細に利用する方法ですので、間違っている点がございましたらご指摘ください。
今後も vue3 の関連コンテンツを更新していきますので、よろしくお願いします。
また、フロントエンドの最新情報も定期的に更新していきますので、フォロー大歓迎です、よろしくお願いします！
vue3.3がアップデートされました
定義Propsの改善
たとえば、次のようなインターフェイスを持つコンポーネントがあります。
interface people{
name:string,
age:number
}
export type {
people}
それからそれを使用するときは、次のようにすることができます
<script lang="ts" setup>
import {
people} from './interface'
defineProps<people>()
</script>
<template>
<h1>{
{
name }}</h1>
</template>
親コンポーネントで呼び出される
<HelloWorld name="any" :age="20" />
複数の条件をサブコンポーネントでdefineProps使用することもできます
<script lang="ts" setup>
import {
people} from './interface'
defineProps<people&{
speak?:string}>()
</script>
<template>
<h1>{
{
name }}</h1>
<h2>{
{
speak }}</h2>
</template>
親コンポーネント
<HelloWorld name="any" :age="20" speak="hello world"/>
「3.3 を使用するときに props のデフォルト値を設定するにはどうすればよいですか?」に関するフィードバックをいただいた @千白 に感謝します。
withDefaults(defineProps<people>(),{ name:'anny', age:20 })
ジェネリック型
ここでは引き続き上記のインターフェイスを使用します。
interface people{
name:string,
age:number
}
ジェネリック型はサブコンポーネントでdefineProps使用できます
<script setup lang="ts" generic="U extends people">
import {
people } from '../interface'
defineProps<{
peopleObj:U
}>()
</script>
<template>
<h1>{
{
peopleObj }}</h1>
</template>
親コンポーネントから呼び出される
<HelloWorld :peopleObj="{ name: 'any', age: 20 }" />
定義エミットの改善
イベントをスローするときに、イベントのタイプをより便利に設定できるようになりました
前の呼び出しメソッドを見てください。
const emit = defineEmits<{
(e: 'foo', id: number): void
}>()
emit('foo', 1)
親コンポーネントから呼び出される
<HelloWorld @foo="foo" />
これで、次のように書くことができます。
const emit = defineEmits<{
foo:[id:number]
}>()
emit('foo', 1)
親コンポーネントから呼び出される
<HelloWorld @foo="foo" />
スロット定義の使用
defineSlots次を使用してスロットのタイプを定義できます。
まず例を見て、スロットを定義しましょう
<slot name="main"></slot>
親コンポーネント
<HelloWorld >
<template #main>
<h1>hello world !</h1>
</template>
</HelloWorld>
上に示されているように、名前付きスロットです。
次に、 を使用してdefineSlots1 つを制約します作用域插槽。
サブアセンブリ:
<script setup lang="ts">
defineSlots<{
main?: (props: {
msg: string }) => any
}>()
</script>
<template>
<slot name="main" msg="tony"></slot>
</template>
defineSlotsその中には、main定義したスロットの名前、props定義したスロットのパラメータ、anyおよび定義したスロットの戻り値があります。
ここでは、スロットの名前をmain、スロットのパラメータをmsg、戻り値を に制限しますany。
親コンポーネントの呼び出しを見てください。
<HelloWorld >
<template #main="slotProps">
<h1>hello world {
{
slotProps.msg}}!</h1>
</template>
</HelloWorld>
これらにはいくつかの制限があることに注意することが重要です。
現在のいくつかの制限:
- 必要なスロット チェックは、volar/vue-tsc にはまだ実装されていません。
- スロット関数の戻り値の型は現在無視されており、任意の型を指定できますが、将来的にはこれを利用してスロットの内容を確認する可能性があります。