VUE non-parent subcomponent communication problem and solution

Recently encountered a scene when you do a login section, first rendering the login component when you click the “User” button, and then jump directly after the user logs in. User Information Interface (User Components). Here, it is necessary to pass the user information obtained by asynchronous requests to the USER component by asynchronous request, but the login and login components are not a parent-child component, which is temporarily called a brother component. In short, I want to solve the information transfer problem between the brothers.

// Export Default {Methods: {Login () {this. $ AXIOS ({Method: ‘Post’, URL: ‘/ Student / Login / ‘, Data: {UserName: this.username, password: this.password}}) .then (in (response) {this. $ router.replace ({path:’ user ‘});} .bind (this ))) .catch (error) {console.log (error); Alert (‘username or password error’);});}}}
   
After the asynchronous request is completed, jump to the USER component, but the request returns information of Response will not be able to pass to the User component of the non-parent-child components.
…………………………………… ………………………………………… ………………………………………………… …………………………………………

Solve the problem:

First, first I think of the Login component and the USER component (two components 2 are 1) To avoid information delivery between the components, this solution is too low, destroying the original structure of the project.

Second, the document is known that communication is also required between the two components of the non-parent-child relationship. Under a simple scene, an empty Vue instance can be used as an event bus:

VAR bus = new Vue () // Trigger the event BUS in the component A. Emit (‘ID-SELECTED’, 1) // In the hook created by component B. $ ON (‘ID-SELECTED’, FUNCTION (ID) {// …})

Take the problem that you encounter as an example, write specific implementation: (WARNING: I can’t use this simple way to solve the situation) best First create a JS file, create our Eventbus, name it bus.js

Import Vue from ‘Vue’; Export Default New Vue ();
  Then in the login.vue file:  
// is located in login.vue Import Bus from OMPORT BUS’../bus.js’; Export Default {Methods: {Login () {this. $ AXIOS ({Method: ‘POST’, URL: ‘/ Student / Login /’, Data: {Username: this.username, Password: this.password}}) .Then (response) {/ * * The ‘login-on’ here is an event that is constructed in BUS (do not need to declare elsewhere), through the EMIT () function * manual Trigger this event, then listen in this event in user.Vue, once the event is found, you can use the * callback function to receive the response object, to achieve the destination of information delivery * * / bus. $ EMIT (‘login-on “, Response); this. $ router.replace ({path: ‘user’});} .bind (this)) .catch (error) {Console.log (Error); Alert (‘username or password error ” );});}}}
In the user.Vue file:

// is located in the user. Import bus from ‘../bus.js’; Export Default {mout: {bus. $ {=> {// The message is the data from login.vue. Console.log (MES[});}}

The data transfer is completed.
However, when the test is found in the User.Vue component, there is no trigger
  analysis: In the context I encounter, login.vue components and user.vue components are replaced with each other. Relationship, that is, you need to jump from the login component through the Vue-Router to the USER component, and then start rendering the USER.VUE component after login.vue, so  

in User.Vue
 Bus. $ ON ('login-on', message =>   Listening is to start after the event and trigger, naturally does not generate a callback function. 
It can be seen that the defect of the officially recommended EVENTBUS solution is that during the data transfer process, the two components must have been rendered. In this scenario, this method is not applicable.

Third, Vuex Solution:

Familiar with Vuex, please skip directly.
  Best in the root directory of SRC create a new file, called store.js  

// located in store.js import Vue from ‘vue’ import Vuex from ‘vuex’ Vue.use (Vuex); export Default New Vuex.Store ({/ * * State refers to the stored data, * The following data is the data field I need to use in the project * * / state: {HAS_Login: False, ID: 1, Mobile_num: ” Name: ”}, / ** MUTATIONS is to change STATE (data) action function, * The following User_Message is the * state data field I will assign the incoming Message to the warehouse, to update the destination of the data * * / mutations: {user_Message (state, message) {state.has_login = true; state.id = message.data.id; state.mobile_num = message.data.mobile_num; state;}}}

Then in the login.vue component, submitted user information

  // is located in login.vue Import UserMessage from '../store'; Export Default New Vuex.Store ({Methods: {Loginsubmit () {this. $ AXIOS ({Method: 'POST', URL: '/ Student / Login /', Data: {Username: this .username, password: this.password}} .then (function (response) {// Calls the user_message function in MUTATION in Store.js here, thereby changing the State Data in the Warehouse UserMessage.commit ('User_Message', Response) .$ router.replace ({path: 'user'};} .bind (this)) .catch (error); Alert ('username or password error');}); }})  
Finally, the information stored in the VUEX warehouse is finally introduced into the warehouse

// is located in User.Vue;

can then be directly assigned to the USER.VUE scope The data field, at the same time, Vuex’s State has hot updated properties, which is very helpful for the synchronization of the data, and has a good advantage.

So, the large-scale project is still useful to use Vuex directly at the beginning, which is aware of great convenience.

Summary
   The above is the VUE non-parent sub-component communication problem solution to you, I hope everyone can help, if everyone If you have any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website! 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment