The link between father and son Vue.js components On 2

Simply put in front of the component definition, register to use.

Why components to communicate?

Polymer component is a future project to merge, then the inevitable need to establish links between the various components, this is the data link communications

Because we do the project. Contact the individual components will inevitably produce. How to establish such a link? I briefly talk about this again contact between one of the most complex of the same parent component sub-assemblies.

First of all I want three components such as Father son sister.

<template id="father">
<div>
<H3> Here is the parent element </ h3>
<Girl @fn = "fn"></Girl>
<Son ref = "son"></Son>
</div>
</template>
 
If I want to implement a click of a button in the sister siblings son to change the data in the data how to do?
First, we know that only in the method of data they can change their data. And there is no link between son and sister. Their bridge is Father. So Father son how to change the properties of it? Since the data flow is unidirectional, only the sub-assembly methods may be used directly acts parent element, and is not reversed. We must find a way to make Father had all the attributes of the son. This is the ref. In the template, son plus a ref. (This is used to ref element or subassembly registration information is registered in the reference information in reference to the parent component.  $refs  On an object, if used in a generic DOM element reference point is the DOM elements; if used in the subassembly, It points to a reference component instance.)
ref = son, parent component of the $ ref will store all that son of. Then parent component can also use this method to change the $ ref to call their own data on the son. Then only need to connect with another parent component assembly daughter. (Subscriptions and publishing). At this time only you need to define a method in which the method sister to write this. $ Emit ( 'son that method of changing data on the parent component', behind can pass parameters) so sister to call their own this method can change the data at the same level of the son
 

Guess you like

Origin www.cnblogs.com/zhangzhouy/p/11402209.html