The pit that Vue has encountered (the parent component passes the value to the input box component, and then the subassembly uses the data that is passed in to bind the data and solve the problem)

A major feature of Vue.js is the ability to implement many reusable components.
When I was doing the project, I encapsulated an input box component, and then all of the same styles on the page were called with this component, and just at first thought it was simple to implement, as a Vue just learned, not just to write a single component, then each page input problem, But actually when I was in the process of passing the value of the problem, because in our pass-through, Vue has always followed the data coupling, not to change the data between the two, Vue also provided an error, but in the parent component passed the value to the child component, and the child component of this property V-model bound, When we change the value on the input box, we change the value of the parent component. The solution is as follows
Parent component

Sub-component


Key content
The input component maintains private data, assigns values through computed, and watch changes notifies the parent component via $emit