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

Today, the editor will share with you the relevant knowledge points about the way of communication between components in Vue, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Parent and child components

Props/event

The child component sometimes needs to communicate with the parent component by passing a custom event by the child component $emit, which the parent component listens for further action. The parent component communicates with the child component using props to pass a property bound to the child component, which is derived from the parent component.

Parent/children

Use $children to manipulate child components in the parent component. And in the parent component through $children to access the child components that have been introduced in the parent component, $children returns the child component table, which is an array.

Child components subcomponents can access data and defined methods in the parent component through $parent, such as modifying the $data in the parent component.

Ref

The parent component can define a ref property for the child component, and then the parent component accesses the data in the child component through the $ref [property name defined on the object child component

Provide/inject

It is suitable for communication between components of ancestor and descendant relationships, where ancestor elements provide a value through provide, and descendant elements obtain this value through inject. This value is non-responsive by default, or responsive if it is an object:

Sibling component

Bus

In Vue. In 2.x, it is recommended that an empty Vue instance be used as the central event bus (bus), that is, as an intermediary.

The components of the communication must all introduce this instance administrator.

Pass a custom event through bus.$emit ()

In the components that need to be operated, listen for this custom event through bus.$on to perform the operation.

Vuex

Vuex is a status management tool launched by Vue.

Vuex is to store all the variables that need to be shared "in one object", and then put the object in the top-level component for use by other components. To put it this way, think of vue as a js variant file and components as functions, then vuex is a global variation, but this "global variation" contains some specific rules.

Access the data and invoke the public methods defined in Vuex store through the $data object.

Cross-level component

Bus vuex provide inject

These are all the contents of the article "what are the ways to communicate between components in Vue?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.