We know, vue idea that there is an important component, functional point of extraction is about to re-use it as a component of the page you want to use only need to refer to the component to get the corresponding function points.
The components of the scope is an important characteristic of isolation, that is a component instance have a private scope, when refers to the component on the page, only the component instance can access this scope.
But when the same page multiple times when using the same components, if only create an instance, but in this instance but then called twice, both calls will result in mutual interference problem, because this time the two call access to the same scope. For example, there is now a yanggb components, introduced me to my page (create a component instance), then called twice (twice calling component instance on the page), then when the object of my call to the first bound a property variable assignment of the 100, then the property with an object variable bindings of the second call will be assigned 100, because the two calls in the same scope bound to the same object variable, and JavaScript within all objects are all references also cause the value of the second call to follow changes in the value of the second call.
// reference yanggb assembly and create an instance const yanggb = () => Import ( '@ / Components / yanggb' ) // register the component instance Components: yanggb {} // in two calls to the page component instance <yanggb : value = "100"> </ yanggb> <yanggb> </ yanggb>
This time, if the component is displayed directly: the value of the value attribute binding, then the two calls will show the value of 100.
In fact, the solution here has been pretty clear, since it creates an instance called twice affect each other, then I create two instances are not called once will not interfere with each other yet? Let's try.
// referenced but creates two instances of the same component yanggb const yanggb = () => Import ( '@ / Components / yanggb' ) const yanggb1 = () => Import ( '@ / Components / yanggb' ) // Register two component instances components: {yanggb, yanggb1} // on the page calls are two component instances <yanggb: value = "100"> </ yanggb> <yanggb1> </ yanggb1>
Well, this time because two instances have independent private scope, it will not lead to the result of the mutual interference, calls the second example does not show the value of 100.
PS: The above examples [] and [] to call the relevant word is personal understanding, just to facilitate understanding, not necessarily correct.
In addition, in the process of problem-solving, we found some related solutions, one of which is the use of JSON.stringify () and JSON.parse () method with the use of two-way binding to RE- (personal understanding is derived by force new object, dereference the original object, and bind the new object to the component calls), but always felt a bit strange, because it is only in the same scope lifted the multiple references to the same object, not in line with the design characteristics of the components, and unexpected problems may arise, not like this approach.
"A lot of people are telling me to be sensible, but no one told me to be happy."