v-model vue in principle, with the v-model custom components

v-model VUE can achieve two-way binding, but what principle is it? Down to see it

According to the official interpretation of the document, v-model is actually a syntactic sugar, it is automatically in the element or component parses above is: value = "" and @ input = "", like so

1  // Standard wording 
2 <INPUT = V-Model "name">
 . 3  
. 4  // equivalent 
. 5 <INPUT: "$ event.target.value name =" value = "name" INPUT @ =>
 . 6  
. 7  // when the above assembly 
. 8 <div: value = "name" @ INPUT = "Event name $ ="> </ div>

1. When typing in the input box input, it will automatically trigger input event, name value is updated binding.

2. When the value of the name change by JavaScript, updates the value of the input value

According to the above principle, vue to achieve two-way data binding through the v-model

 

Read previous explanation for the v-model has a certain understanding. Here we come to realize their components above the v-model it

Requirements: implement a simple click of a button, every click to automatically bind value price plus 100. Component called AddPrice.vue

// AddPrice.vue 
// value of the parameter to accept binding by props 
<Template> 
  <div @click = "$ EMIT ( 'the INPUT', value + 100)"> Click the plus money <div> 
</ Template> 

<Script> 
  Export default { 
    the props: [ 'value' ] 
  }
    
 </ Script> // call parent components 
<add-price v-model = "price"> </ add-price>

Components used props to accept incoming parameter value, click event trigger assembly and use $ emit call input event on the parent component to achieve a two-way binding custom