Skip to content

Commit 3c59629

Browse files
authored
feat: add v-model through computed explanation (#371)
1 parent 435b91f commit 3c59629

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

src/guide/component-basics.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,30 @@ Now `v-model` should work perfectly with this component:
338338
<custom-input v-model="searchText"></custom-input>
339339
```
340340

341+
Another way of creating the `v-model` capability within a custom component is to use the ability of `computed` properties' to define a getter and setter.
342+
343+
In the following example, we refactor the `custom-input` component using a computed property.
344+
345+
Keep in mind, the `get` method should return the `modelValue` property, or whichever property is being using for binding, and the `set` method should fire off the corresponding `$emit` for that property.
346+
347+
```js
348+
app.component('custom-input', {
349+
props: ['modelValue'],
350+
template: `
351+
<input v-model="value">
352+
`,
353+
computed: {
354+
value: {
355+
get() {
356+
return this.modelValue
357+
},
358+
set(value) { this.$emit('update:modelValue', value)
359+
}
360+
}
361+
}
362+
})
363+
```
364+
341365
That's all you need to know about custom component events for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Custom Events](component-custom-events.md).
342366

343367
## Content Distribution with Slots

0 commit comments

Comments
 (0)