Sons components communicate on vue
Author: Fox's Fish House
This link: VUE components communicate
GitHub：sueRimn
If the component is a single page, there is a parent-child relationship between the components, you need to use different data transfer, depending on the status of the parent-child approach.
With the new Electron-vue project comes with two components to illustrate.
Directory structure is as follows:
Wherein the parent components LandingPage.vue, SystemInformation.vue a subassembly.
A parent components pass data to the sub-assembly
Data can be passed to the parent component subassembly through Props.
Subcomponents :
Display subassembly from data acquisition to the parent component newName , NEWPWD , using props.
Parent component:
Use in place calling component v-bind bind variables defined in the parent component to display the sub-assembly data name newName, newPwd.
Then the data can be displayed in the parent component transfer it subassembly.
Second, the data is transmitted to the parent sub-assembly component
Subassemblies by $ emit pass data to the parent component events.
Subassembly:
Data subcomponents username , through change event calls the method setUser () , triggering $ emit events, custom events and then sent to the parent component of changeName
Parent component:
父组件的changeName事件调用getUser方法，获取从子组件传递的参数username。
getUser 方法中的参数 msg 就是从子组件传递过来的参数 username。
以下动图中，输入框与welcome是属于子组件，嵌套在父组件中，输入框输入值，传递给父组件显示。
