How to communicate between components? Inventory of Vue component communication methods (worth collecting)

VueHow to communicate between components? This article takes stock of the 10 component communication methods of Vue2 and Vue3. I hope it will be helpful to everyone!

There are many ways to communicate components in Vue, and there will be many differences in the implementation of Vue2 and Vue3; this article will useOptional APIThe three different implementation methods of combined APIandsetupcomprehensively introduce the component communication methods of Vue2 and Vue3. The communication methods to be implemented are shown in the table below. (Learning video sharing:vue video tutorial)

method	Vue2	Vue3
Pass from father to son	props	props
Pass from son to father	$emit	emits
From father to son	$attrs	attrs
son to father	$listeners	None (merged into attrs mode)
father to son	provide	provide
Child to parent	inject	inject
Child component accesses parent Component	$parent	None
Parent component accesses child component	$children	None
Parent component accesses child component	$ref	expose&ref
Brother passing value	EventBus	mitt

props

Props are one of the most commonly used communication methods in component communication. The parent component is passed in through v-bind, and the child component is received through props. The following are its three implementation methods

• Optional API

//父组件   //子组件  

• Combined Api

//父组件   //子组件  

• setup syntax sugar

//父组件   //子组件  

Note

The data flow in props is single item, that is, sub- Components cannot change the value passed by the parent component

In the combined API, if you want to use other variables to receive the value of props in the child component, you need to use toRef to convert the properties in the props to responsive.

emit

The child component can publish an event through emit and pass some parameters, and the parent component monitors this event through v-on

• Option API

//父组件   // 子组件  

• Combined API

//父组件   //子组件  

• setup syntax sugar

//父组件   //子组件  

attrs and listeners

The child component uses $attrs to obtain all attributes of the parent component except the attributes passed by props and the attribute binding attributes (class and style).

The sub-component uses $listeners to obtain all v-on event listeners of the parent component (excluding .native modifiers), which are no longer used in Vue3; but the attrs in Vue3 can not only obtain the parent component The passed properties can also be obtained from the parent component v-on event listener

• Optional API

//父组件   //子组件  

• Combined API

//父组件   //子组件  

• setup syntax sugar

//父组件   //子组件  

Note

When using attrs to call the parent component method in Vue3, on needs to be added before the method; for example parentFun->onParentFun

provide/inject

provide: is an object, or a function that returns an object. It contains the attributes to be given to future generations

inject: a string array, or an object. Get the value provided by the parent component or higher-level component, which can be obtained in any descendant component through inject

• Optional API

//父组件  //子组件 

• Combined type API

//父组件  //子组件  

• setup syntax sugar

//父组件  //子组件 

Description

provide/inject is generally in deep component nesting Use appropriately. Generally used in component development.

parent/children

$parent: The child component obtains the Vue instance of the parent component, and can obtain the properties and methods of the parent component, etc.

$children: Parent The component obtains the Vue instance of the sub-component, which is an array and a collection of direct children, but the order of the sub-components is not guaranteed

• Vue2

import Child from './Child' export default { components: { Child }, created(){ console.log(this.$children) //[Child实例] console.log(this.$parent)//父组件实例 } }

NoteThe$childrenobtained by the parent component is not responsive

expose&ref

$refs can directly obtain element attributes, and can also Directly obtain the sub-component instance

• Optional API

//父组件   //子组件  

• Combined API

//父组件   //子组件  

• setup syntax sugar

//父组件   //子组件  

Note

Obtaining the subcomponent instance through ref must be obtained after the page is mounted.

When using setup syntax sugar, the child component must expose elements or methods to the parent component in order to obtain

EventBus/mitt

sibling component communication It can be implemented through an event center EventBus, which creates a new Vue instance to monitor, trigger and destroy events.

There is no EventBus sibling component communication in Vue3, but now there is an alternative solutionmitt.js, the principle is still EventBus

• Optional API

//组件1   //组件2   //bus.js import Vue from "vue" export default new Vue()

• Combined API

First install mitt

npm i mitt -S

and then create a new one likebus.jsin Vue2mitt.jsFile

mitt.js

import mitt from 'mitt' const Mitt = mitt() export default Mitt

//组件1   //组件2  

• setup syntax sugar

//组件1   //组件2  

Write at the end

In fact, components can also communicate with Vuex or Pinia state management tools (but this is generally not recommended for communication between components, because this will cause the problem that components cannot be reused). For the usage of Vuex and Pinia, you can refer to this articleAn article analyzing Pinia and Vuex

(Learning video sharing:web front-end development,Basic programming video)

The above is the detailed content of How to communicate between components? Inventory of Vue component communication methods (worth collecting). For more information, please follow other related articles on the PHP Chinese website!