Now that you have a basic understanding of the V-Model from the previous article in Depth on V-Model Forms Usage, let’s look at how it can be used in custom components.

In vue3

When v-Model is used in a custom component, the component receives the value of a property modelValue and then updates the value by firing the Update :modelValue event:

<custom-comp v-model="msg"></custom-comp>
<! -- equivalent to -->
<custom-comp :model-value="msg" @update:model-value="msg = $event"></custom-comp>
<! It is recommended to name according to kebab-cased specifications, e.g. Model-value not model-value -->
Copy the code

V – model implementation

According to the definition rules above, we can implement a custom input component like this:

// Example 1: Custom input component
// Implement 1:
app.component('custom-input', {
  props: ['modelValue'].template: `  `});// Implementation 2: Use INPUT's V-Model + computed(calculated attributes)
app.component('custom-input', {
  props: ['modelValue'].computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(v) {
        this.$emit('update:modelValue', v); }},},template: `  `});Copy the code

Use:

<custom-input v-model="msg"></custom-input>;
Copy the code

The example above just wraps input. What if a custom component does not contain input? To understand, let’s look at the following example of a custom count component:

// Example 2: Customize the count component
app.component('custom-count', {
  props: {
    modelValue: Number,},methods: {
    increment() {
      this.$emit('update:modelValue'The + +this.modelValue);
    },
    decrement() {
      this.$emit('update:modelValue', -this.modelValue); }},template: `  ~  
{{modelValue}}
 `});Copy the code

Use:

<custom-count v-model="num"></custom-count>;
Copy the code

Let’s look at the implementation:

V – model parameters

The v-model receives the value of the attribute modelValue and triggers the event update:modelValue to update the value. Can we change the attribute name modelValue? How do I do this? In fact, we only need to add parameters to v-model, such as v-Model :mv, so that modelValue is changed to mv.

Let’s modify the above custom component:

app.component('custom-input', {
  props: ['mv'].template: `  `});Copy the code

The way to use it becomes:

<custom-input v-model:mv="msg"></custom-input>;
Copy the code

Multiple V-Model bindings

Thanks to the addition of v-Model parameter passing in VUe3, custom components can support multiple V-Model bindings at the same time:

<user-name v-model:first-name="firstName" v-model:last-name="lastName"></user-name>
Copy the code

The component implementation becomes:

app.component('user-name', {
  props: {
    firstName: String.lastName: String,},template: `   `});Copy the code

Effect:

In vue2

When v-Model is used in a custom component, the component receives the value of a property value and then updates the value by firing an input event, thus implementing the V-Model:

<custom-comp v-model="msg"></custom-comp>
<! -- equivalent to -->
<custom-comp :value="msg" @input="msg = $event"></custom-comp>
Copy the code

V – model implementation

Similarly, let’s look at vue2 implementing a custom input component:

// Example 1: Custom input component
Vue.component('comp-input', {
  props: {
    value: String,},template: `  `});Copy the code

Customize v-Model attributes

Vue2 also supports changing the received attribute names, but unlike VUe3, vue2 is modified by specifying prop and event properties model in the component:

// Example 2: Customize the count component
Vue.component('custom-count', {
  model: {
    prop: 'v'.// default: value
    event: 'i'.// default: input
  },
  props: {
    v: Number,},data() {
    return {
      count: this.v,
    };
  },
  template: `<button @click="$emit('i', ++count)">+1</button>`});Copy the code

We see that in this example we add a model property and specify two properties: Prop and Event, yes, these are the properties and event names required by the V-Model, except that their default values are value and input. We can customize the prop and event names by modifying the Model properties.

Online effects:

The official documentation also explains why a model attribute is created. It is to avoid conflicts with v-Models when values are used for other purposes, such as checkboxes and checkboxes.

conclusion

The v-model of a custom component is explained through the implementation of vue3 and VUe2, and the differences can be found:

  1. Vue3 default attribute name, event name:modelValueandupdate:modelValue; In VUe2, it is:valueandinput;
  2. Vue3 directly passes the following parameters of V-modelv-model:fooTo specify the property name, and the changes are reflected in the parent component, andMultiple V-Models can be bound; Vue2, by contrast, has a subcomponentProp and Event values in the Model propertyTo specify the property name and event name, and the changes are reflected in the child component.

Let’s move on to the next article: Understanding the Modifiers of v-Models in Depth (vue3 vs. VUE2).

Welcome to leave comments or add wechat (CLEam_lee) to communicate.