Skip to content

Commit b59d839

Browse files
sxzzyyx990803
authored andcommitted
feat: add defineModel in sfc-script-setup.md
1 parent 1b110da commit b59d839

File tree

2 files changed

+52
-6
lines changed

2 files changed

+52
-6
lines changed

src/api/sfc-script-setup.md

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,52 @@ const props = withDefaults(defineProps<Props>(), {
227227

228228
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.
229229

230+
## defineModel() <sup class="vt-badge" data-text="3.4+" /> {#definemodel}
231+
232+
This macro can be used to declare a two-way binding prop that can be consumed via `v-model` from the parent component, and it can be declared and mutated like a ref. This will declare a prop with the same name and a corresponding `update:propName` event.
233+
234+
If the first argument is a literial string, it will be used as the prop name; Otherwise the prop name will default to `"modelValue"`. In both cases, you can also pass an additional object which will be used as the prop's options.
235+
236+
```vue
237+
<script setup>
238+
const modelValue = defineModel({ type: String })
239+
modelValue.value = 'hello'
240+
241+
const count = defineModel('count', { default: 0 })
242+
function inc() {
243+
count.value++
244+
}
245+
</script>
246+
247+
<template>
248+
<input v-model="modelValue" />
249+
<button @click="inc">increment</button>
250+
</template>
251+
```
252+
253+
### Local mode
254+
255+
The options object can also specify an additional option, `local`. When set to `true`, the ref can be locally mutated even if the parent did not pass the matching `v-model`, essentially making the model optional.
256+
257+
```ts
258+
// local mutable model, can be mutated locally
259+
// even if the parent did not pass the matching `v-model`.
260+
const count = defineModel('count', { local: true, default: 0 })
261+
```
262+
263+
### Provide value type <sup class="vt-badge ts" /> {#provide-value-type}
264+
265+
Like `defineProps` and `defineEmits`, `defineModel` can also receive a type argument to specify the type of the model value:
266+
267+
```ts
268+
const modelValue = defineModel<string>()
269+
// ^? Ref<string | undefined>
270+
271+
// default model with options, required removes possible undefined values
272+
const modelValue = defineModel<string>({ required: true })
273+
// ^? Ref<string>
274+
```
275+
230276
## defineExpose() {#defineexpose}
231277

232278
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>`.
@@ -249,7 +295,7 @@ defineExpose({
249295

250296
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).
251297

252-
## defineOptions() {#defineoptions}
298+
## defineOptions() <sup class="vt-badge" data-text="3.3+" /> {#defineoptions}
253299

254300
This macro can be used to declare component options directly inside `<script setup>` without having to use a separate `<script>` block:
255301

@@ -379,5 +425,5 @@ defineProps<{
379425

380426
## Restrictions {#restrictions}
381427

382-
* 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.
383-
* `<script setup>` does not support In-DOM Root Component Template.([Related Discussion](https://github.com/vuejs/core/issues/8391))
428+
- 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.
429+
- `<script setup>` does not support In-DOM Root Component Template.([Related Discussion](https://github.com/vuejs/core/issues/8391))

src/error-reference/index.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ onMounted(() => {
1515

1616
In production builds, the 3rd argument passed to the following error handler APIs will be a short code instead of the full information string:
1717

18-
- [`app.config.errorHandler`](/api/application.html#app-config-errorhandler)
19-
- [`onErrorCaptured`](/api/composition-api-lifecycle.html#onerrorcaptured) (Composition API)
20-
- [`errorCaptured`](/api/options-lifecycle.html#errorcaptured) (Options API)
18+
- [`app.config.errorHandler`](/api/application#app-config-errorhandler)
19+
- [`onErrorCaptured`](/api/composition-api-lifecycle#onerrorcaptured) (Composition API)
20+
- [`errorCaptured`](/api/options-lifecycle#errorcaptured) (Options API)
2121

2222
The following table maps the codes to their original full information strings.
2323

0 commit comments

Comments
 (0)