So yesterday I posted about Vue.js component messaging. This is in a way a continuation so you will want to read that first “Vue.js Component Messaging”.
I had suggested that firing an event off of a common element wether that is the body or the main Vue.js instance really does not matter. However I kind of got to thinking more about it and that would work but there may be a problem if there are multiple instances of the same component on the same page. In the example of an Alert component if for some reason there was one Alert component in the header and one in the footer an alert message would be added to both.
I did have an idea I thought may solve that issue allow for something like an event component property. Wether you pass it the full value or maybe just a suffix. It could be
event-name by default and if you pass it
event-name-2 then that event would fire while passing the same data as
event-name. As a suffix maybe you could pass
my-custom-suffix and then the event that would be fired would be something like
Then you could listen for the event following the example I used in the previous post using the proposed helper functions. Feel free to listen to these events however since there is nothing magical happening here.
So you may want to be a little more descriptive when naming your properties however, this basically outlines how it could work. Then in the case of the Alert I am using I wouldn’t need the property since there really shouldn’t be more than one on a page. However this use case may evolve and then I could use this strategy.
I could possibly envision a situation where your component has more than a few events and this may not scale really well. However, in that situation it may be more of an issue with how the component is built. This is definitely an interesting problem I have never encountered before.