Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge about the principle of v-model instruction in Vue. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Vue's v-model is a very powerful instruction that automatically binds the value of the native form component to the value of your choice.

Let's take a look at its effect:

The value of the input box is bound to a data, and the value of the input box changes, so does the value bound to it.

We can refer to the example http://cn.vuejs.org/v2/guide/forms.html# text of the official document.

In the process of manually entering hello, the value of the p tag bound to him also changes in real time.

How can such a magical effect be achieved? Or refer to the official documents.

Http://cn.vuejs.org/v2/guide/components.html# uses the form input component of custom events

Officials have also stated that v-model is just a grammatical sugar, and the real realization depends on

Binding v-bind: binding responsive data

Trigger input events and pass data (core and focus)

Now we also want to design our own form components, and we also want to expose the values of the components through v-model. What can we do?

For example, if we were to design a custom currency input component, exposing the value of the component through v-model, we might use the following component code

Then when we use this self-defined component, the value of the component is exposed inside the component to the value bound by v-model; how is it implemented?

To understand the implementation of v-model, you need to look at part of the code of the official custom v-model component example to illustrate

If we look at the code in the figure above, there is a line of $emit, which actually triggers an input event. The parameter after 'input' is the value passed to the property bound by v-model, which means that v-model implements custom data binding like this:

First, the general component structure:

?

That is, custom components generally contain native form components (of course, non-form components can also be used)

Then, bind the event to the native control, capture the value of the native component, use the $emit method to trigger the input method, and the component listens to the input event and passes the value to the myattr.

Here is a question, why 'input'? Three words, look at the document!

This is a rule of vue's implementation of v-model: components that use v-model

Automatically listens for the input event and passes the value carried by the input event to the property bound by the v-model! In this way, the value inside the component is given to the parent component

With the above explanation, let's summarize how to use v-model to implement custom form components:

Listens to the events of the native component and triggers the input event by calling the $emit ('input', data) method after getting the value of the native component

These are all the contents of the article "what is the principle of the v-model instruction in Vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.