My Vue 2.0 project follows the single-file component approach and consists of three components: App (parent), AppHeader, and FormModal. Both AppHeader and FormModal are direct children of App and siblings of each other.
The main objective is to toggle the visibility of the FormModal component when a button in the AppHeader component is clicked. However, I'm struggling to understand Vue's uni-directional data flow. How can I pass an event from the child (AppHeader) back up to the parent (App) to change the form's visibility?
(AppHeader.vue)
<template>
<header>
<div class="app-header">
<h1 class="app-title">Sample Header</h1>
<a class="link-right" v-on:click="toggleModal()" href="#">
<i class="fa fa-pencil-square-o"></i>
</a>
</div>
</header>
</template>
<script>
import FormModal from "./FormModal.vue";
export default {
name : "AppHeader",
props : ['visible'],
methods : {
toggleModal () {
this.visible = !this.visible;
}
},
components : {
FormModal
}
}
</script>
(FormModal.vue)
<template>
<div class = "form-content" v-if="visible">
<!-- Some form markup -->
</div>
</template>
<script>
export default {
name : "FormModal",
props : ['visible']
//Also have data, methods, and computed here, but they aren't relevant to the example.
}
</script>
I realize I've misunderstood how to use props in this instance. I need guidance on the correct way to incorporate props when importing a template.
Edit:
Apologies for the oversight. In my project, the App.vue file serves as the parent component for all templates involved.
(App.vue)
<template>
<div class="app">
<AppHeader></AppHeader>
<FormModal></FormModal>
</div>
</template>
<script>
import AppHeader from "./AppHeader.vue";
import Compose from "./FormModal.vue";
export default {
data () {
return {
views : [AppHeader, FormModal]
}
},
components : {
AppHeader,
FormModal
}
}
</script>
To recap, App functions as the parent with two sibling components, AppHeader and FormModal. Clicking a button in AppHeader should trigger a toggle in FormModal's visibility. Unfortunately, I haven't fully grasped Vue's uni-directional data flow and could use advice on tackling this scenario.