I’m building a website that’s structured somewhat like this:
<app> <page-wrapper> <page-section-that-needs-a-modal> </page-section-that-needs-a-modal> </page-wrapper> <modal> </modal> </app>
Modal is a component that, you guessed it, can hide and show a modal dialog box that appears over everything else. For the sake of argument, let’s say that it needs to be outside of the
<page-wrapper> component. (I’m 99% sure that it does need to based on how everything is positioned.) At the moment, I have my project set up with the basic structure above.
To trigger the modal from
<page-section-that-needs-a-modal>, I handle a click event in that component that calls a method that emits a
show-modal event on an event bus, which is received by the bus in the
<app> component, it sets a data property in
showModal to true, and passes HTML from an argument supplied with the event through a prop to the
<modal> component. This is fairly straightforward and it works, but there are a few issues:
- I can’t really do anything interactive on the modal since the template is just receiving HTML. I’d really like to be able to use Vue events, computed properties, etc. in the modal but I don’t think it’s possible through an event.
- This doesn’t feel like the right way to do it.
All of the modal components I’ve seen so far assume that the modal is a child of the component that triggers it, but that won’t work for me. I have a feeling that if there is a solution, it might somehow involve slots, but I can’t quite grok it. Any help/suggestions much appreciated, thanks!