Several ways of vue component communication (comprehensive)

1 What is the meaning of component communication?

1.1 Basic principles of vue framework development (understanding)

①Data-driven view ②Incremental development from the bottom up ③Support modular development ④Development based on MVVM mode

1.2 What is the meaning of component communication?

①When the application gradually expands, and each function point is a relatively independent component, each function (component) cannot avoid interaction at this time, for example: "Welcome xx user login" on the home page, the data source can be directly from The from form information of the login component.
②In short, the biggest advantage of component communication is that it can realize data sharing, thereby reducing a certain amount of memory consumption. Data can come from a request, cached in local memory, and can be used by other components.

2 Component communication types and their implementation principles? (traditional)

2.1 Common component communication types and common communication methods

Communication type ①: father-to-son ② son-to-father ③ non-parent-child components (brother components, intergenerational components)

Communication method: ①props and $emit (commonly used in parent-child components) ② $attrs and $listeners ③provide and inject ④v-model ⑤ $parent and $childrens ⑥vuex

2.2 Parent component to child component (parent-child props)

Thinking: How to get the users array in the parent (ceshi.vue) component in the subcomponent child (user.vue)

父组件parent：

子组件child

理解：

Introduce the child component in the parent component and mount it in the parent component. In the subcomponent, set the name of the component to Users, corresponding to the name value under the components object in the (ceshi.vue) file. Pass the users array in the parent component in the form of props (arrays or objects can be accepted) objects in the child component, and use the parent component array: {type: data type, mandatory attribute} (required attribute) The
above meaning Yes users data must have attribute values. That is, the users array passed from the parent component must have attribute values.

2.4 Parent-child components (provide and inject)

One advantage of this method is that no matter how deep the nesting level of the subcomponent is, as long as the parent provides (provide) the property, the subcomponent jnject['property'] is injected into the current component, and the parent component can be obtained value.

2.5 Child component to parent component (child pass parent $emit and events method)

(Basic idea) Bind events in subcomponents, trigger this.$emit('custom attribute name', the data to be transmitted) method through events; introduce subcomponents into parent components to accept e through events to get data.

子组件

父组件

2.6 Parent-child components, brother components, and generational components (central event processing bus $bus and $on)

(Basic idea) ① Throw out an empty vue instance through new ② Introduce that empty vue instance in the component that wants to communicate, and use an event to trigger Bus.$emit('custom attribute name', to be passed data) Send data to the target component ③Pass in the target component Bus.美元符on('passed attribute name', assign the data to the attribute in the current data)

A组件

B组件

C组件

》》》》》》》》In the process of reading, if you have any questions, please contact me, thank you!