Summary of four ways of Vue component communication

Preface

As we all know, vue is an mvvm framework. One of the differences that may be relatively large compared to jquery is the communication between components. The focus of this article is to sort out the first two, parent-child component communication and eventBus communication. I think the instructions in the Vue document are still a bit simple, but I didn't understand it for the first time.

• Communication between parent and child components
• EventBus communication for non-parent and child components
• Use local cache to implement component communication
• Vuex Communication

The first communication method: parent-child component communication

Parent component passes data to child component

The parent component needs to do 4 things in total

      1.import son from './'Introduce child components son

2.components : {"son"} Register all subcomponent names in

3. Apply child components to the template of the parent component,<son></son>

4. If you need to pass data to subcomponents, write it in the template template<son :num="number"></son>

 // 1.Introduce subcomponents import counter from './counter'
 import son from './son'

// 2. Register subcomponents in ccponents components : {
 counter,
 son
 },

// 3. Use child components in template <son></son>

 // 4. If you need to pass data, you will also write it in temple <counter :num="number"></counter>

The subcomponent only needs to do 1 thing

1. Use props to accept data and you can use the data directly

2. The data received by the subcomponent cannot be modified. If you really need to modify it, you can use calculation properties or assign data to a variable in the subcomponent data

 // 1. Use Props to accept data props: [
  'num'
  ],

// 2. If you need to modify the obtained data, you can write it like this props: [
  'num'
 ],
 data () {
 return {
  number : 
 }
 },

Subcomponent passes data to parent component

The parent component needs to do 2 things in total

Define events in template

Write functions in methods to listen for event triggers of subcomponents

// 1. Define event changeNumber when applying child components in templete <counter :num="number"
   @changeNumber="changeNumber"
 >
 </counter>

// 2. Use changeNumber to listen to whether the event is triggered methods: {
  changeNumber(e){
  ('Subcomponent is emitted',e);
   = e
  },
 }

A total of 1 thing is required for a child component

After the data changes, use $emit to trigger it

// 1. After the data changes in the child component, it can be triggered with $emit. The second parameter can be passed. methods: {
  increment(){
   ++
   this.$emit('changeNumber', )
  },
 }

The second communication method: eventBus

EventBus communication method is aimed at communication between non-parent and child components, and its principle is to trigger and listen through event.

However, because it is a non-parent-child component, they need to have an intermediate component to connect.

I used it by defining a component on the root component, that is, the #app component, which can be accessed by all components. The specific usage method is as follows

We need to do 3 things in total when passing data using eventBus

1. Add Bus attributes to the app component (so that all components can passthis.$Access it without introducing any files)

2. In component 1,this.$.$emitTrigger event

3. In component 2,this.$.$onListen to events

// 1. Add bus attributes to the app component in itimport Vue from 'vue'
new Vue({
 el: '#app',
 components: { App },
 template: '<App/>',
 data(){
 return {
 Bus : new Vue()
 }
 }
})

// 2. In component 1, trigger emitincrement(){
 ++
 this.$.$emit('eventName', )
 },

// 3. In component 2, listen to events and accept datamounted(){
 this.$.$on('eventName', value => {
  = value
 ('busEvent');
 })
},

The third communication method: use localStorage or sessionStorage

This kind of communication is relatively simple, but the disadvantage is that the data and status are relatively chaotic and are not easy to maintain.

pass(key) Get data

pass(key,value)Store data

Notice:use() / () Convert data format.

The fourth communication method: using Vuex

Vuex is quite complicated, you can write a separate article

Summarize

The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.