Vue component communication
Components are one of the most powerful features of vue.js, and component instances are scoped independently of each other, which means that data from different components cannot be referenced to each other. In general, components can have the following relationships:
As shown in the figure above, A and B, B and C, B and D are all father-child relationships, C and D are brothers, and A and C are atavistic relationships (possibly multiple generations apart).
How to choose an effective communication mode for different usage scenarios? This is the subject of our discussion. This article summarizes several ways to communicate between VUE components, Such as props, emit/emit/emit/on, vuex, parent/parent/parent/children, attrs/attrs/attrs/listeners and dojo.provide/inject
How do VUE components communicate with their parents?
The parent passes data to the props and the child passes data to the parent through events ($emit). $parent / $children; $parent / $children; Ref can also access component instances. 4. Provide/inject API; 5, attrs/attrs/attrs/listeners
How do sibling components communicate with each other? There are several ways
1, Bus; 2, Vuex
Iii. Cross-level communication?
1, Bus; 2, Vuex; 3, dojo.provide/inject API 4, attrs/attrs/attrs/listeners
Segmentfault.com/a/119000001…