From 0c51ed35458e63dac940e207cd24cf38e9efc44b Mon Sep 17 00:00:00 2001 From: Marina Mosti Date: Sun, 2 Aug 2020 11:32:04 +0100 Subject: [PATCH] feat: add v-model through computed explanation --- src/guide/component-basics.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md index 5131678ffd..42b5907382 100644 --- a/src/guide/component-basics.md +++ b/src/guide/component-basics.md @@ -338,6 +338,30 @@ Now `v-model` should work perfectly with this component: ``` +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. + +In the following example, we refactor the `custom-input` component using a computed property. + +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. + +```js +app.component('custom-input', { + props: ['modelValue'], + template: ` + + `, + computed: { + value: { + get() { + return this.modelValue + }, + set(value) { this.$emit('update:modelValue', value) + } + } + } +}) +``` + 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). ## Content Distribution with Slots