Several methods of communication components Vue

On one comes, vue.js is allowed to receive information parent component sub-assemblies by props, but does not allow the parent component sub-assemblies to receive information by props

1. $ emit () and on

When the sub-components that need to pass data to the parent component, it is necessary to use custom events.
Use the Observer pattern, sub-assemblies with $ emit () to trigger an event, the event parent component sub-assemblies with $ on () to monitor Xin.
More common are: parent component can also be on the custom tag using the v-on directly in the sub-assembly to listen for a custom event subcomponents triggered.

2. bus: Brothers components and assemblies across multi-level communication

Vue is recommended to use an empty instance as a central event bus (bus)

3. this. $ Parent can directly access the component's parent component, the parent component through this. $ Children access to all of his sub-components, you can also be used to define the ref subcomponent index


Design principles:
sub-assembly should be avoided as much as possible dependent on the parent component data, but it should not take the initiative to modify the data.
Sons best components by props and $ EMIT communicate.

4. Better state management solutions vuex

Guess you like

Origin www.cnblogs.com/whyaza/p/11528492.html