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

This article will explain in detail what is the mode of communication between Vue components. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Communication mode: 1, communicate with props, 2, communicate with "$emit", 3, communicate with ref, 4, communicate with EventBus, 5, communicate with parent or root, 6, communicate with listeners with attrs, 7, communicate with Inject with Provide, 8, communicate with vuex.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

Communication mode between Vue components

I. the concept of communication between components

Before we begin, let's split the word communication between components.

module

Communication

We all know that components are one of the most powerful features of vue, and we can think of every .vue in vue as a component.

Communication refers to the sender transmitting information to the recipient in a certain format through a certain medium in order to achieve a certain purpose. In a broad sense, the traffic of any information is communication.

Communication between components means that components (.vue) transmit information in some way to achieve a purpose.

Take a chestnut.

When we are using the table component in the UI framework, we may pass some data into the table component, which essentially forms the communication between the components.

2. What is solved by communication between components

In ancient times, people transmitted information through post stations, flying pigeons, beacon alarms, symbols, language, eyes, touch and so on. Today, with the rapid development of science and technology, communication is basically completed by cable or radio. Various communication methods have emerged, such as wired telephone, landline telephone, cordless telephone, mobile phone, Internet and even video telephone.

From the above paragraph, we can see that the essence of communication is information synchronization and sharing.

Back in vue, each component has its own scope, and the data between components cannot be shared.

But in actual development work, we often need to share data between components, which is also the purpose of component communication.

It is necessary for them to communicate with each other in order to form an organic and complete system.

II. Classification of communication between components

The classification of communication between components can be divided into the following

Communication between parent and child components

Communication between sibling components

Communication between grandchildren and descendant components

Communication between non-relational components

III. The scheme of communication between components

Sort out 8 conventional communication schemes in vue

Pass through props

A custom event is triggered through $emit

Use ref

EventBus

Parent or root

Attrs and listeners

Provide and Inject

Vuex

Props transmits data

Applicable scenario: parent components pass data to child components

The child component sets the props property to define the parameters passed by the parent component.

The parent component passes the value literally in the child component tag

Children.vue

Props: {/ / string form name:String / / received type parameter / / object form age: {type:Number, / / received type is numeric defaule:18, / / default is 18 require:true / / age attribute must be passed}}

Father.vue component

$emit triggers a custom event

Applicable scenario: the child component passes data to the parent component

The child component triggers a custom event through $emit, and the second parameter of $emit is the passed numeric value

The parent component binds the listener to get the parameters passed by the child component

Chilfen.vue

This.$emit ('add', good) Father.vue

Ref

The parent component sets the ref when using the child component

The parent component acquires data by setting the child component ref

Parent component

This.$refs.foo / / get the subcomponent instance, through which we can get the corresponding data

EventBus

Usage scenarios: sibling components pass values

Create a central time bus EventBus

The sibling component triggers a custom event through $emit, and the second parameter of $emit is the passed value

Another sibling component listens for custom events through $on

Bus.js

/ / create a central time bus class class Bus {constructor () {this.callbacks = {}; / / store the name of the event} $on (name, fn) {this.callbacks [name] = this.callbacks [name] | | []; this.callbacks [name] .push (fn) } $emit (name, args) {if (this.callbacks [name]) {this.callbacks [name] .forEach ((cb) = > cb (args)) } / / main.jsVue.prototype.$bus = new Bus () / / Mount $bus to the prototype of the vue instance / / another way Vue.prototype.$bus = new Vue () / / Vue has implemented the function of Bus Children1.vuethis.$bus.$emit ('foo') Children2.vuethis.$bus.$on (' foo', this.handle)

Parent or root

Build a communications federation of overseas Chinese through a common ancestor $parent or $root

Sibling component

This.$parent.on ('add',this.add)

Another sibling component

This.$parent.emit ('add')

Attrs and listeners

Applicable scenario: ancestors pass data to their descendants

Set the batch downloading properties $attrs and $listeners

Contains feature bindings in the parent scope that are not recognized (and acquired) as prop (except class and style).

Internal components can be passed on via vMutual = "$attrs"

/ / child: foo is not declared in props

{{$attrs.foo}}

/ / parent// passes values to Grandson from generation to generation, and communication/index.vue// Child2 expands / / Grandson to make {{msg}}

Provide and inject

Define the provide property in the ancestor component and return the passed value

The value passed by the inject receiving component in the descendant component

Ancestor component

Provide () {return {foo:'foo'}}

Descendant component

Inject: ['foo'] / / get the value passed by the ancestor component

Vuex

Applicable scenario: component data transfer in complex relationships

Vuex acts as a container for storing shared variables

The place where state stores shared variables

Getter, which can add a getter derived state (equivalent to a computed property in store) to get the value of a shared variable

Mutations is used to store methods for modifying state.

Actions is also used to store methods for modifying state, but action is based on mutations. Often used to do some asynchronous operations

Summary

The component data transfer of parent-child relationship chooses props and $emit to pass, or ref

You can choose $bus for data transfer of sibling components, and then choose $parent for transmission.

Ancestor and descendant component data transfer can choose attrs and listeners or Provide and Inject

Component data transfer of complex relationships can store shared variables through vuex

This is the end of the article on "what is the mode 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.