How to operate vue to enable v-model in a custom component-JS Tutorial-php.cn

This time I will bring you how to operate vue to enable v-model in a custom component, and how to operate vue to enable v-model in a custom componentNotesWhat are they? Here are actual cases. Let’s take a look.

v-model directive

The so-called "directive" actually extends the

HTML tagfunction (attribute).

Let’s start with a component, without vue-model, normal father-son communication

Copy after login

After clicking the response, what the father said to his son becomes the son’s response. The information received by the son has also changed, enabling communication.

Switch to v-model

Copy after login

Although the copywriting is different, the effect is ultimately the same.

Look at the v-model of the official custom component

Official example

https://vuefe.cn/v2/api/#model

There is this sentence: By default, v-model on a component will use value as prop and input as event.

Try changing the example of the sub-component above, and it will work.

Copy after login

Let’s summarize:

If you are lazy and don't want to handle events yourself, then use the default 'value' && 'input' events. If you use native events, even the model attribute can be omitted.

If you want your code to be clearer and distinguish custom events, then the following combination is your cup of tea.

It depends on your own mood to define prop and event. Of course, you need to know your opinion [try to avoid keywords]

model: { prop: 'someProp', // 注意，是prop，不带s。我在写这个速记的时候，多写了一个s，调试到怀疑人生 event: 'someEvent' } this.$emit('someProp', [returnValueToParent])

Copy after login

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!