I have the following layout:
- src
- components
- Footer.vue
- views
- Page.vue
- App.vue
- components
I want to access the 'message' variable in App.vue, but I'm unsure how to do it since Footer.vue is not a direct child of App.vue (but rather a child of Page.Vue which - through the router - is a child of App.vue).
What changes should I make to my files? They currently look like this - and no message is displayed in App.vue:
//App.vue
<template>
<p>The message is: {{ message }}</p>
<router-view />
</template>
<style lang="scss">
@import "./_scss/main.scss";
</style>
.
//Page.vue
<template>
<Footer/>
</template>
<script>
import Footer from '@/components/Footer.vue'
export default {
components: {
Footer
}
}
</script>
.
//Footer.vue
<template>
<input v-model="message" placeholder="Edit me">
<p>The message is: {{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: ''
}
}
}
</script>