how to issue a toggle from a header component to a sidebar component

Question

Hi Syncfusion,I am learning about its components and I have reached a point that I cannot pass.I have a HeaderComponent component, inside it I have a button that should trigger the sidebar's toggle function.The sidebar in turn is inside another component and both are imported into the app.How am I going to make the sidebar listen to the toggle event and react to it?the structure looks like this:

Sharon Sanchez Selvaraj · Accepted Answer

Hi Ryan, 
 
Greetings from Syncfusion Support. 
 
We have checked with your requirement and we have created a sample here for your reference. 
 
https://codesandbox.io/s/vue-sidebar-forked-kz090 
 
Refer to the below code snippet. In the page Header.Vue, this can be achieved by passing the argument through emit method. 
 




methods: { 
    closeClick: function () { 
      EventBus.$emit("toggleClick"); 
    }, 
  }, 
 
And by declaring the method in the Template.Vue. 
 




mounted() { 
    EventBus.$on("toggleClick", this.toggleClick); 
  }, 
 
Please check with the below links to know more about Sidebar component. 
 
Demo: https://ej2.syncfusion.com/vue/documentation/sidebar/getting-started/ 
 
Documentation: https://ej2.syncfusion.com/vue/demos/#/material/sidebar/default.html 
 
API: https://ej2.syncfusion.com/vue/documentation/api/sidebar/ 
 
Please get back to us if you need further assistance. 
 
Regards, 
 
Sharon Sanchez S.