Analysis of V-Model of Vue Customize Components

Recently learned Vue, today I saw the form input component of custom events, tangled for a while, then suddenly realized … The official tutorial is not very detailed, so I decided to summarize.

V-model syntax

V-MODEL implements the two-way binding of the form input, we generally write:

  New Vue ({EL: '#App', Data: {Price: ''}}); 
Through this statement, the PRICE variable and the input value are bound to the input value
In fact, V-model is just a syntax, the real implementation is:

   The above code is divided into several steps:  
1. Bind the value of the input box to the Price variable This is one-way binding, meaning that the value of the price variable can change the value of the INPUT, but change Value can’t change the price

2. Monitor the Input Event (INPUT input box has this event, This event is automatically triggered when entering content). When the input box input content is one-way, the value of the Price is changed, the two-way binding is achieved.

Custom Form Input Components

We usually write input can be as complex as above, directly using V-model, but since we study this syntax sugar It is definitely some other use, such as a custom form input box component.

Vue.Component (‘Input-PRice ‘, {Template:’

‘}); new Vue ({EL:’ #App ‘, Data: {Price:’ ‘}});

  The above 
is our custom form input component, can we directly use V-MODEL to achieve two-way binding? If you think that you are to young ~ According to our V-Model grammatical sugar
1. Our subcomponent (INPUT-price "required to bind A value from the parent component, receives
2 through the PROPS of the sub-assembly. There is a new input when there is a new input on the subcomponent, and the new value is passed to the parent component



Vue.component (‘price-input’, {//5, passes the value value of the parent component via the PROPS // 1, triggered the component’s INPUT event template: ‘
‘, 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:’ ‘}, method: {onInput: function (val) {this.price = val;}}};
  Here, several steps: 
<!-- 1. When there is data input, the INPUT event 2 is triggered by manually triggered the parent component and passes the value to the parent component 3. The INPUT event of the parent component is triggered, assigns the resulting value to the parent component of the parent component, implements the one-way binding of the input box value to the parent element

4. The value of the parent component value Set to Price
5. Pass the Value Value of the parent component to the child component via the PROPS, realize the one-way binding of the parent component to sub-component Value
small Summary:

• V-bind only enables one-way binding • V-model (V-Bind + triggered INPUT event) to achieve two-way binding

The above is the v-model of the VUE custom component of Xiaobian to everyone, I hope to help everyone!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment