What if bus communicates between two components without triggering for the first time?

two common components in an interface need to communicate with each other. Bus"s method is adopted, but it is found that it does not trigger

for the first time.

components that pass data (component 1):

clipboard.png

():

clipboard.png

[Operation flow]: modify the information in the input of component 1, and @ change triggers the bus to send data; click the button in component 2 to receive the data sent by bus, and store the data in the database.

[question]: how to solve the problem that I didn"t receive the data sent by bus when I clicked the save button for the first time?
[description]: I have found a lot of methods on Baidu, saying that bus is triggered to send data in the beforeDestory of component one, but in this case, I have to close this interface every time to get the data, which does not meet my needs at all.
Gods, may I ask how to solve this problem?

Vue.js
Mar.23,2021

as for the first time is not triggered, mainly when the page is not created, the button has already sent a message, of course, the page can not receive
in the second component to use beforeCreate to obtain bus data can be solved. The code is as follows: 

    beforeCreate(){
        Bus.$on('modify', (e) => {
            console.log('e---<',e);
            this.name = e.name;
            this.value = e.value
        })
    },
    beforeDestroy() {
        Bus.$off('modify');
    },

Previous: How do different common components communicate with each other in the same interface?

Next: A bizarre problem with the vue project

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