Is it possible to access and call a function in an imported component from the "parent element"? I have multiple modules that I want to include dynamically in my app. I thought that if I import a component like Header in my main App.vue file, it would recognize the function from the main App.vue file.
Here is an example of the App.vue file structure:
<template>
<div>
<div class="m-grid m-grid--hor m-grid--root m-page">
<!-- <loader></loader> -->
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div :is="currentComponent"></div>
<div v-show="!currentComponent" v-for="component in componentsArray" :key="component.id">
<button @click="swapComponent(component)">{{component}}</button>
</div>
<button @click="swapComponent(null)">Close</button>
<footer-partial></footer-partial>
</div>
</div>
</template>
<script>
import Loader from '@/components/partials/Loader.vue'
import MobileMenu from '@/components/partials/MobileMenu.vue'
import Header from '@/components/partials/Header.vue'
import Footer from '@/components/partials/Footer.vue'
export default {
data () {
return {
currentComponent: null,
componentsArray: ['dashboard', 'schedule', 'locations', 'mileage']
}
},
name: 'App',
components: {
'loader': Loader,
'mobile-menu-partial': MobileMenu,
'header-partial': Header,
'footer-partial': Footer
},
methods: {
swapComponent: function (component) {
console.log('component', component)
this.currentComponent = component
if (component === null) {
console.log('anywhere_main')
this.$router.push('/')
} else {
this.$router.push('/' + component)
}
}
}
}
</script>
<style>
</style>
Therefore, my question is: Can I access and utilize the function swapComponent in my header-partial component? This is essential for handling the opening of modules within the app.