Shulou(Shulou.com)06/01 Report--

This article mainly shows you "vue how to use v-model", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue how to use v-model" this article.

V-model grammatical sugar

V-model is often used for two-way data binding on form elements, such as. In addition to native elements, it can also be used in custom components.

V-model is a grammatical sugar that can be broken down into props: value and events: input. That is, the component must provide a prop named value and a custom event named input. If these two conditions are met, consumers can use v-model on the custom component. For example, the following example implements a number selector:

Minus 1 {currentValue}} plus 1 export default {name: 'InputNumber', props: {value: {type: Number}}, data () {return {currentValue: this.value}}, watch: {value (val) {this.currentValue = val }, methods: {increase (val) {this.currentValue + = val; this.$emit ('input', this.currentValue);}

Props generally cannot be modified within the component, it is modified through the parent, so the implementation of v-model generally has an internal data of currentValue. The initial value is obtained from value, and when the value is modified, it is monitored and updated in time through watch; the component does not modify the value of value, but modifies currentValue. At the same time, the modified value is sent to the parent component through a custom event input. After the parent component receives it, the parent component modifies the value. Therefore, the above number selector component can be used in the following two ways:

Import InputNumber from'.. / components/input-number/input-number.vue'; export default {components: {InputNumber}, data () {return {value: 1}

Or:

Import InputNumber from'.. / components/input-number/input-number.vue'; export default {components: {InputNumber}, data () {return {value: 1}}, methods: {handleChange (val) {this.value = val;}

If you don't want to use the names value and input, starting with version 2.2.0 of Vue.js, there is an option for model to specify their names, so the number selector component can also write:

Minus 1 {{currentValue}} plus 1 export default {name: 'InputNumber', props: {number: {type: Number}}, model: {prop:' number', event: 'change'}, data () {return {currentValue: this.number}} Watch: {value (val) {this.currentValue = val }, methods: {increase (val) {this.currentValue + = val; this.$emit ('number', this.currentValue);}

In the model option, you can specify the names of prop and event, rather than value and input, because these two names have other uses in some native form elements.

The above is all the content of the article "how vue uses v-model". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.