Skip to content

Script Setup Edits for Clarity #1194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 28, 2021
Merged

Script Setup Edits for Clarity #1194

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6e612d
Second-person consistency
Jutanium Aug 19, 2021
467d0fb
Edit defineProps and defineEmits for clarity
Jutanium Aug 19, 2021
7d5fc2f
Update src/api/sfc-script-setup.md
Jutanium Aug 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/api/sfc-script-setup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ Think of `MyComponent` as being referenced as a variable. If you have used JSX,

### Dynamic Components

Since components are referenced as variables instead of registered under string keys, we should use dynamic `:is` binding when using dynamic components inside `<script setup>`:
Since components are referenced as variables instead of registered under string keys, you should use dynamic `:is` binding when using dynamic components inside `<script setup>`:

```vue
<script setup>
Expand Down Expand Up @@ -133,7 +133,7 @@ import * as Form from './form-components'

## `defineProps` and `defineEmits`

To declare options like `props` and `emits` with full type inference support, we can use the `defineProps` and `defineEmits` APIs, which are automatically available inside `<script setup>`:
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>`:

```vue
<script setup>
Expand All @@ -148,7 +148,7 @@ const emit = defineEmits(['change', 'delete'])

- `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, while `defineEmits` accepts the same value as the `emits` option.
- `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).

- `defineProps` and `defineEmits` provide proper type inference based on the options passed.

Expand Down Expand Up @@ -195,7 +195,7 @@ const attrs = useAttrs()

## Usage alongside normal `<script>`

`<script setup>` can be used alongside normal `<script>`. A normal `<script>` may be needed in cases where we need to:
`<script setup>` can be used alongside normal `<script>`. A normal `<script>` may be needed in cases where you need to:

- Declare options that cannot be expressed in `<script setup>`, for example `inheritAttrs` or custom options enabled via plugins.
- Declaring named exports.
Expand Down