diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md index e14e4b62b8..4b9003b3d1 100644 --- a/src/api/sfc-script-setup.md +++ b/src/api/sfc-script-setup.md @@ -227,6 +227,52 @@ const props = withDefaults(defineProps(), { 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. +## defineModel() {#definemodel} + +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. + +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. + +```vue + + + +``` + +### Local mode + +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. + +```ts +// local mutable model, can be mutated locally +// even if the parent did not pass the matching `v-model`. +const count = defineModel('count', { local: true, default: 0 }) +``` + +### Provide value type {#provide-value-type} + +Like `defineProps` and `defineEmits`, `defineModel` can also receive a type argument to specify the type of the model value: + +```ts +const modelValue = defineModel() +// ^? Ref + +// default model with options, required removes possible undefined values +const modelValue = defineModel({ required: true }) +// ^? Ref +``` + ## defineExpose() {#defineexpose} Components using `