How does vue nesting route communicate with each other between father and son?

problem description

what vue+vue-router+vue-cli, wants to achieve is that the parent page has a global message push, hoping to automatically update the data of a child page as soon as a message is pushed.

the environmental background of the problems and what methods you have tried

has tried to put the child page import directly into the parent page, and then directly .methods. Method, but prompts that some variables in the method are not defined. Then change the way of thinking, thinking that as soon as a message is pushed by the parent component, it sends a status to the child page, which has been using watch to listen for the information sent by the parent component, and then updates the data directly in the child page. But the problem now is that I have seen a lot of examples of parent-> child communication using prop, which do not use route nesting, but directly put the child page components into the parent page, so this method is not good either. The method of $on,$emit seems to be able to communicate only between sibling components. Since a large part of the project has already been done, it is a little late to introduce vuex. I hope to see if the bosses have any other ways. Thank you.

Vue-router javascript
Jun.02,2021

vuex learn about

pseudo code 

import EventEmitter from 'events'

window.eventEmitter = new EventEmitter()
// 
window.eventEmitter.emit('myEvent')
// 
window.eventEmitter.on('myEvent' function () {
  // do something
})

or vue can also be 

const bus = new Vue()
// 
bus.$emit('myEvent', data)
// 
bus.$on('myEvent', data => {
  // do something
})

use $on , $emit is very appropriate, put notification and listening in the root component 

this.$root.$emit('message')
this.$root.$on('message', () => {

})

vuex was born specifically for this situation ~ very easy to use, when your components are very deeply nested, the communication between father and son will be very tedious and uncomfortable, vuex is equivalent to a repository of global variables, all components can access.

  • within the parent component

get the message. Callback (this.$store.state.commit ('setMsg',newMsg));
) get the message and save it to the global repository

  • within subcomponents

calculate the attribute directly to get the new information from the global repository, and if there is any, do what you want to do ~ 

computed(){
    newMsg(){
        return this.$store.state.newMsg;
    }
}

Previous: How long is the front-end cached data usually cached?

Next: How does koa-body get the information uploaded to the front-end page file?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu