[Vuejs]-Using code (function/template) in a Vue.js application from one component in another component with no direct relationship

by

1👍

✅

I see two ways to do it…

  1. Add default slot into TheTopBar template at the place you wanna see your actions
  2. Remove TheTopBar component from your top-level component, place it inside your "main view" components templates (each of them) and define content of the slot there (actions)

Other way could be using Vue router’s Named Views but that would require you to create separate "actions" component for each corresponding "main view" component

Edit

Actually there is other way. portal-vue allows exactly what you want….

👤Michal Levý

0👍

The short answer is no, you cannot inject code from one component to another. You will have to have the template logic inside the header component.

However, there are a couple of things you can do.

  1. Inside the header component you can check what the current path is with this.$route.path. And based on that display the action item. (if you are using a router)
  2. Use a vuex store to track what the action item in the header should be. You could have the main component set the store value and header can then read it and act accordingly

I hope this answers your question.

👤T. Short

Leave a comment