You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To declare `props` and `emits` in `<script setup>`, you must use the `defineProps`and`defineEmits`APIs, which provide full type inference support and are automatically available inside `<script setup>`:
-`defineProps`and`defineEmits`are **compiler macros** only usable inside `<script setup>`. They do not need to be imported, and are compiled away when `<script setup>`is processed.
-`defineProps`accepts the same value as the [`props`option](/api/options-data.html#props), while `defineEmits`accepts the same value as the [`emits`option](/api/options-data.html#emits).
-The options passed to `defineProps`and`defineEmits`will be hoisted out of setup into module scope. Therefore, the options cannot reference local variables declared in setup scope. Doing so will result in a compile error. However, it _can_ reference imported bindings since they are in the module scope as well.
Components using `<script setup>`are **closed by default** - i.e. the public instance of the component, which is retrieved via template refs or `$parent`chains, will **not** expose any of the bindings declared inside `<script setup>`.
When a parent gets an instance of this component via template refs, the retrieved instance will be of the shape `{ a: number, b: number }`(refs are automatically unwrapped just like on normal instances).
204
+
親がテンプレート参照を介してこのコンポーネントのインスタンスを取得すると、取得されたインスタンスは `{ a: number, b: number }`という形状になります(ref は通常のインスタンスと同様、自動的にアンラップされます)。
205
205
206
206
## `useSlots` と `useAttrs`
207
207
208
-
Usage of `slots` and `attrs` inside `<script setup>`should be relatively rare, since you can access them directly as `$slots`and`$attrs`in the template. In the rare case where you do need them, use the `useSlots`and`useAttrs`helpers respectively:
`useSlots`and`useAttrs`are actual runtime functions that return the equivalent of `setupContext.slots`and`setupContext.attrs`. They can be used in normal composition API functions as well.
219
+
`useSlots`と`useAttrs`は、`setupContext.slots`と`setupContext.attrs` と同等のものを返す実際のランタイム関数です。これらは通常の Composition API の関数内でも使用できます。
220
220
221
221
## 通常の `<script>` との併用
222
222
223
-
`<script setup>`can be used alongside normal `<script>`. A normal `<script>`may be needed in cases where you need to:
const post = await fetch(`/api/post/1`).then(r => r.json())
257
257
</script>
258
258
```
259
259
260
-
In addition, the awaited expression will be automatically compiled in a format that preserves the current component instance context after the `await`.
`async setup()`must be used in combination with `Suspense`, which is currently still an experimental feature. We plan to finalize and document it in a future release - but if you are curious now, you can refer to its [tests](https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/__tests__/components/Suspense.spec.ts) to see how it works.
-When using type declaration, the equivalent runtime declaration is automatically generated from static analysis to remove the need for double declaration and still ensure correct runtime behavior.
-In dev mode, the compiler will try to infer corresponding runtime validation from the types. For example here `foo: String` is inferred from the `foo: string` type. If the type is a reference to an imported type, the inferred result will be `foo: null` (equal to `any`type) since the compiler does not have information of external files.
One drawback of the type-only `defineProps`declaration is that it doesn't have a way to provide default values for the props. To resolve this problem, a `withDefaults`compiler macro is also provided:
This will be compiled to equivalent runtime props `default`options. In addition, the `withDefaults`helper provides type checks for the default values, and ensures the returned `props`type has the optional flags removed for properties that do have default values declared.
Due to the difference in module execution semantics, code inside `<script setup>`relies on the context of an SFC. When moved into external `.js`or`.ts`files, it may lead to confusion for both developers and tools. Therefore, **`<script setup>`**cannot be used with the `src`attribute.
0 commit comments