Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to communicate between Vue components. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

What are the ways to communicate between Vue components?

Communication between Vue components is one of the most common knowledge points in interviews. This question is a bit similar to open-ended questions. The more methods you answer, the more points you get, indicating that you are more proficient in Vue. Communication between Vue components only refers to the following three types of communication: parent-child component communication, intergenerational component communication, and sibling component communication. Below, we will introduce each communication method and explain which type of component communication this method can be applied to.

(1) props / $emit is suitable for parent-child component communication.

This method is the basis of Vue components, and I believe most students will hear more about it, so I won't give an example to introduce it here.

(2) ref communicates with $parent / $children applicable parent-child components

Ref: if used on ordinary DOM elements, the reference points to the DOM element; if used on subcomponents, the reference points to the component instance

$parent / $children: access the parent / child instance

(3) EventBus ($emit / $on) is suitable for communication between father and son, intergenerational and sibling components.

This method uses an empty Vue instance as the central event bus (event center), which is used to trigger and listen for events, so as to realize the communication between any components, including parent-child, intergenerational, and sibling components.

(4) $attrs/$listeners is suitable for intergenerational component communication.

Attrs: contains feature bindings in the parent scope that are not recognized (and acquired by prop) (except class and style). When a component does not declare any prop, it contains bindings for all parent scopes (except class and style), and internal components can be passed in via vClure binding = "$attrs". It is usually used with the inheritAttrs option.

Listeners: contains the v-on event listeners in the parent scope (without the .native modifier). It can be passed into internal components via vMuon = "$listeners"

(5) provide / inject is suitable for intergenerational component communication.

Variables are provided through provider in the ancestor component, and then injected into the descendant component through inject. Provide / inject API mainly solves the problem of communication between cross-level components, but its usage scenario is that sub-components obtain the status of superior components, and cross-level components establish a relationship between active provision and dependency injection.

(6) Vuex is suitable for communication between father and son, intergenerational and sibling components.

Vuex is a state management model developed specifically for Vue.js applications. The core of every Vuex application is store. "store" is basically a container that contains most of the state in your application.

The state storage of Vuex is responsive. When the Vue component reads the state from the store, if the state in the store changes, then the corresponding component will be updated efficiently accordingly.

The only way to change the state in store is to commit the mutation explicitly. This makes it easy for us to track changes in each state.

This is the end of this article on "what are the ways of communication between Vue components?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.