There are two components in my project:
- App.vue
- Sidekick.vue
In the App.vue component, there is a property that needs to be accessed from Sidekick.vue
App.vue
<template>
<div id="app">
<p>{{ myData }}</p>
<div class="sidebar">
<router-view/> // The sidekick component appears here
</div>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
myData: 'is just this string'
}
}
}
</script>
Sidekick.vue
<template>
<div class="sidekick">
{{ myData }}
</div>
</template>
<script>
export default {
name: 'Sidekick'
}
</script>
The goal is to access myData (defined in App.vue) from Sidekick.vue
An attempt was made to import App.vue within Sidekick.vue using:
Sidekick.vue (incorrect approach)
<script>
import App from '@/App'
export default {
name: 'Sidekick',
data () {
return {
myData: App.myData
}
}
}
</script>
Although props were considered as a solution, typically for child / parent components, the situation with Sidekick.vue being inside a div within App.vue raises questions of hierarchy. Should myData access be provided to <router-view/> somehow?
UPDATE: (illustrating relationship between App.vue and Sidekick.vue)
index.js (router configuration file)
import Vue from 'vue'
import Router from 'vue-router'
import Sidekick from '@/components/Sidekick',
import FakeComponent from '@/components/FakeComponent'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
redirect: '/fakecomponent'
},
{
path: '/sidekick',
name: 'Sidekick',
component: Sidekick
},
{
path: '/fakecomponent',
name: 'FakeComponent',
component: FakeComponent
}
]
})
export default router
Sidekick.vue is rendered upon accessing /sidekick