Four Methods of Vue component communication are summarized, and four methods of vue component communication are summarized.

Four Methods of Vue component communication are summarized, and four methods of vue component communication are summarized.

Preface

As we all know, vue is an mvvm framework. One of the major differences between vue and jquery lies in 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 simple. I did not understand them for the first time.

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

First Communication Mode: parent-child component communication

The parent component transmits data to the child component.

Four tasks are required for the parent component.

1.import son from './son.js'Introduce child component son

2. Incomponents : {"son"} Register the names of all sub-components

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

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

// 1. Introduce the sub-component import counter from './counter' import son from './son'

// 2. register the sub-component components: {counter, son} In ccmponents },

// 3. Use sub-components in the template <son> </son>

// 4. If you want to transmit data, write <counter: num = "number"> </counter> In templete.

Only one task is required for sub-components.

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

2. The data received by the Child component cannot be modified. If you do need to modify it, you can use the calculation attribute or assign the data to a variable in the child component data.

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

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

The child component transmits data to the parent component.

The parent component requires two tasks.

Define events in template

Write a function in methods to listen to subcomponent event triggers.

// 1. When applying sub-components in templete, define the event changeNumber <counter: num = "number" @ changeNumber = "changeNumber"> </counter>

// 2. Use changeNumber to monitor whether the event triggers methods: {changeNumber (e) {console. log ('child component emit', e); this. number = e },}

One task is required for sub-components.

After the data changes, use $ emit to trigger

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

Second Communication Mode: eventBus

EventBus is used for non-parent-child component communication. Its principle is to trigger and listen to events.

But because it is not a parent-child component, they need an intermediate component to connect.

I use the root component, that is, # The app component defines a component that can be accessed by all components. The usage is as follows:

When using eventBus to transmit data, we need to do three tasks in total.

1. Add the Bus attribute to the app component (so that all components can usethis.$root.BusAccess it without introducing any files)

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

3. in component 2,this.$root.Bus.$onListen to events

// 1. in main. add the "import Vue from 'vue 'new vue ({el:' # app', components: {app}, template:" To the app component in js: '<App/>', data () {return {Bus: new Vue ()}}})

// 2. Trigger emitincrement () {this. number + + this. $ root. Bus. $ emit ('eventname', this. number)} In component 1 )},

// 3. in component 2, listen to events and accept data mounted () {this. $ root. bus. $ on ('eventname', value => {this. number = value console. log ('secret ');})},

Third communication mode: Use localStorage or sessionStorage

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

Passwindow.localStorage.getItem(key) Get Data

Passwindow.localStorage.setItem(key,value)Store Data

Note:UseJSON.parse() / JSON.stringify() Convert the data format.

Fourth communication mode: Use Vuex

Vuex is complicated. You can write an article separately.

Summary

The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.