preface

Are you still there? I haven’t seen you for a week, so what are we going to talk about this week? I don’t know if you remember what I said last week about eventBus this week

Bug that eventBus triggers repeatedly

Remember the demo THAT I talked about last week? Let me reorganize it

//main.js
window.Bus =new Vue();
//a.vue
...
 beforeCreate(){
    Bus.$on("this_change"And [1, 2])}... //b.vue ...created(){
    Bus.$on("this_change"Console. log(em[1],em[2]); console.log(em[1],em[2]); }); },beforeDestroy(){// Finally, don't forget to delete the transport event Bus.$off("this_change")}Copy the code

It’s very simple, right? Well, you’d be wrong because the ideal is to delete the component as soon as you use it once to make sure that the transfer event is deleted, but in reality, it’s very different and that’s what you’re thinking about, right, so we’re going to talk about it in a real world scenario.

By the way, a lot of the code in the above code block is omitted, and this is something to be aware of when you’re doing a demo, code completion.

So all we have to speak the following scene is a real scene on my side, because I do is about block chain financial part of the content so I do in the actual demand of the page does not need to refresh and cache data but one thing is, in the case of not refresh the page or component to pass data to each other, between sub-components that everyone should be able to think about a lot of moment, For example, the two child components do not share Ajax data, each component requests it separately, either saves the data locally and calls it, or passes the data to the topmost parent component and then passes it to the corresponding child component as the parent component distributes the data to complete the interaction. However, you may not have thought of such methods, which are not only laborious and thankless, but also good for the demo once more values are passed between sub-components. However, it is difficult to control the project. Compared with small projects, the use of EventBus is relatively easy and requires less code to complete the interaction.

BeforeDestroy () Bus.$off does not destroy all components beforeDestroy(). Eventbus is always present beforeDestroy(). But more despair is on this component if you registered a few more words of transmitting and receiving events so the transmission and receiving events to switch back and forth so you try to print will be found that these events will be in the form of increasing after click the trigger, this is the eventbus in practical use and make the difference between the demo.

Back to business how to solve this bug

$on = Bus.$on = Bus.$off = Bus.$on = Bus.$on = Bus.$on = Bus.$on = Bus

Github.com/vuejs/vue/i…

The answer to this question is that mixins can be solved. How to solve this problem will be discussed in next week’s article, which will be the topic of next week’s article. As for the solution here, there is a quick solution to introduce you to vue-Happy-bus. We’ll talk about this later, but first we’ll talk about where to put Bus.$off

// B.vue // I brought the top thing so that you can see it clearlycreated(){
    Bus.$on("this_change"Console. log(em[1],em[2]); console.log(em[1],em[2]); Delete this event immediately after use to prevent multiple Bus triggers.$off("this_change",em);
    });
}
Copy the code

But this method still has some problems, such as something won’t trigger, or sometimes complains, these are not the best solution, but it says the vue – happy – bus this plugin is perfectly solved this problem, this article we leave next week I’ll spend an article on the implementation of this component.

vue-happy-bus

You’ve seen that I’ve been talking about vue-Happy-bus and you’re wondering what the difference is, this component, does it solve our problem, and I can tell you very responsibly that it does solve what we need right now, so let’s just look at the code

NPM install vue-happy-bus --save CNPM install vue-happy-bus --save // referenced in main.js //bus state management import BusFactory  from'vue-happy-bus'// Reference Vue. Prototype with global variables.$BusFactory=BusFactory; Note here that every component that uses Bus registers this event in data Bus:this.$BusFactory(this) in order to call where this refers to the vue prototype.... data:function(){
    Bus:this.$BusFactory(this)}, methods:{// Execute this method on the click event to pass the click_me argument:function(){
        this.Bus.$emit("clear_me"."clear_me")}}... //b.vue ....created(){
     this.Bus.$on("clear_me",(em) => {
        console.log(em)
     }
}
....
Copy the code

$off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off = $off It’s kind of like deleting the whole thing, that’s it, and I’ll look at my article next week.

Ok, this time I buried the last hole and left two holes for me to step on, so that’s all for everyone to share this time, thanks for watching, if you want to ask questions, please discuss in the comments section below.