私は Vue 2.0 で単一ファイル コンポーネント アプローチを使用しています。私は 3 つのコンポーネントApp(親)、AppHeader、およびを持っていFormModalます。AppHeaderそして、お互いのFormModal直系の子供であり兄弟です。App
目標は、ボタンAppHeaderがクリックされたときにFormModal可視性を切り替えることです。私が抱えている問題は、Vue の一方向データ フローを理解することです。イベントを親 ( App)に戻してAppHeader、フォームの可視性を変更することを知らせるにはどうすればよいですか?
(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>
この例では、私は確かに小道具の概念を台無しにしました。テンプレートをインポートするときに props を使用する正しい方法について非常に混乱しています。
編集：
すみません、今日は Vue を使った最初の日です。私は最初、すべてのテンプレートの親である、非常に重要な情報である私のApp.vueファイルを省略しました。
(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>
要約すると、App は親です。2 人の兄弟がいAppHeaderますFormModal。でボタンがクリックされるとAppHeader、FormModalの可視性が切り替えられる必要があります。
私はまだ Vue の一方向のデータ フローを十分に把握しておらず、このシナリオにどのようにアプローチすればよいかわかりません。