A brief analysis of v-model of Vue custom components

I was learning vue recently. Today I saw the form input component of a custom event. I was confused for a while and then suddenly realized... The official tutorial was not written very detailed, so I decided to summarize it.

v-model syntax sugar

v-model implements two-way binding of form input, which we usually write as follows:

 <div >
   <input v-model="price">
 </div>
 new Vue({
   el: '#app',
   data: {
     price: ''
   }
 });

This statement realizes bidirectional binding of price variables and input values

In fact, v-model is just a syntactic sugar, the real implementation is like this:

 <input type="text" 
:value="price" 
@input="price=$">

The above code is divided into several steps:

1. Bind the value of the input box to the price variable. This is a one-way binding, which means that changing the value of the price variable can change the input value, but changing the value cannot change the price

2. Listen to the input event (the input input box has this event, and the event is automatically triggered when the content is input), and when the input box enters the content, the value of the price is changed in one direction.

This enables two-way binding.

Custom form input components

We usually write inputs not as complicated as above, just use v-model, but since we study this syntax sugar, it must have other uses, such as custom form input box components.

<div >
   <input-price v-model="price"></input-price>
 </div>
 ('input-price', {
   template: '<input type='text'>'
 });
 new Vue({
   el: '#app',
   data: {
     price: ''
   }
 });

The above <input-price> is our customized form input component. Can we directly implement two-way binding with v-model? If you think you can, then you are Too young~

First, based on our v-model syntax sugar

1. The value of our child component (input-price) needs to be bound to a value passed from the parent component and receive it through the child component's props.
2. When there is new input on the child component, the input event of the parent component needs to be triggered, and the new value is passed to the parent component as a parameter.

<div > 
   <!-- <price-input v-model="price"></price-input> -->
 
   <!-- Implemented manuallyv-modelTwo-way binding -->
   <!-- 3、Parent component'sinputEvent triggered，将传来的值赋给Parent component's变量price -->
   <!-- 4、Parent componentvalueThe value ofprice -->
   <price-input :value="price" @input="onInput"></price-input>
   <p>{{price}}</p>
 </div>
 ('price-input', {
   // 5. Pass the value of the parent component to the child component through props   // 1. When there is data input, the input event of the component is triggered.   template: '<input :value="value" @input="updateVal($)" type="text">',
   props: ["value"], 
   methods: {
      updateVal: function(val) {
       // 2. Manually trigger the input event of the parent component and pass the value to the parent component       this.$emit('input', val); 
     }
   }
 });
 var app = new Vue({
   el: '#app',
   data: {
     price: ''
   },
   methods: {
      onInput: function(val) {
         = val;
      }
    }
 });

Here are a few steps:

1. When there is data input, the input event of the component is triggered.

2. Manually trigger the input event of the parent component and pass the value to the parent component

3. The input event of the parent component is triggered, and the value passed is assigned to the parent component's variable price, realizing one-way binding of the input box value to the parent element's price

4. The value of the parent component value is bound to price

5. Pass the value of the parent component to the child component through props, implementing one-way binding of the parent component's price to the child component's value

Let me summarize it in a small way:

•v-bind can only implement one-way binding
• v-model (input event triggered by v-bind+) realizes two-way binding

The above is a brief analysis of the v-model of Vue custom components introduced by the editor. I hope it will be helpful to everyone!