Shulou(Shulou.com)05/31 Report--

This article mainly introduces the way of vue component communication has what related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have some gains after reading this vue component communication way, let's take a look at it.

The specific methods are as follows:

1. Using props/$emit to realize communication between parent and child components

Props:props is used to receive data from the parent component through v-bind. When props is an array, it directly receives the properties passed by the parent component; when props is an object, you can set the type, default value, required and verification rules of the properties through type, default, required, validator and other configurations.

$emit: when communicating between parent and child components, you can use $emit to trigger the listening of the parent component v-on to bind the corresponding event on the child component.

two。 Using $refs/$parent/$children/$root to realize parent-child component communication

$refs: you can bind $refs to the DOM element, get the attributes attribute of the DOM element, or you can bind $refs to the subcomponent to get the subcomponent instance.

The parent component instance of the current component can be obtained directly through this.$parent in $parent:vue.

In $children:vue, you can get an array of child component instances of the current component directly through this.$children.

$root: when getting the root vue instance of the current component tree, if the current instance does not have a parent instance, you can use $root to achieve cross-level communication between components.

3. Using $attrs/$listener to realize intergenerational component communication

$attrs:$attrs is used to receive attribute attributes in the parent scope that are not recognized as prop, and can be passed into internal components via vmurbind = "$attrs", which is often used to create high-level components.

The $listeners:$listeners contains v-on event listeners in the parent scope, which can be used to create higher-level components by passing in internal components via vMuon = "$listeners".

4. Using provide/inject to realize intergenerational component Communication

Provide:provide is an object or a function that returns an object whose object contains property that can be injected into its descendants, that is, properties and property values to be passed to their descendants.

Injcet: when injcet is a string array, the properties received will be changed from data to provide; when injcet is an object, you can set default values by configuring attributes such as default and from, and use new named attributes in sub-components.

5. Using Vuex to realize the communication of parent-son, intergenerational and sibling components

Vuex is a state management mode of Vue.js application development, which uses centralized storage to manage the state of all components of the application. When the component reads the state from the store, if the state in the store changes, the corresponding components will be updated efficiently.

6. Using eventBus to realize the communication of parent-son, intergenerational and sibling components

EventBus is the event bus, which registers a new vue instance, listens and triggers the event of the instance by calling $emit and $on of the instance, and realizes the global communication of the component by passing in parameters.

This is the end of the article on "how vue components communicate". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how vue components communicate". If you want to learn more, you are welcome to follow the industry information channel.

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.