在Vue.js 2.0中从导入的同级组件中改变值的正确方法是什么？

Question

我正在使用Vue 2.0的单文件组件方法。我有3个组件App（父），AppHeader和FormModal。 AppHeader和FormModal是App和彼此的兄弟姐妹的直系子女。

目标是当单击AppHeader中的按钮时，应切换FormModal可见性。我遇到的问题是了解Vue的单向数据流。我如何将事件传回给AppHeader父母（App），让它知道变更表单的可见性？

（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> 

我当然拙劣在这个例子中道具的概念。我很困惑导入模板时使用道具的正确方法。

编辑：

原谅我，这是我第一天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> 

总之，应用程序是父。有2个兄弟姐妹，AppHeader和FormModal。当在AppHeader中点击一个按钮时，FormModal的可见性应该被切换。

我还没有很好的掌握Vue的单向数据流，我不知道如何处理这种情况。

Answer 1

在您的应用程序标题中，您需要将"visible" data field绑定到子（表单模式）组件中的"visible"属性。这意味着"visible "data fieldAppHeader和"visible"子组件内的属性将“紧密”在一起，对“可见”数据字段所做的任何更改都将反映在表单模式中。

<form-modal :visible="visible"/> 
... 
<script> 
import FormModal from "./FormModal.vue"; 
export default { 
    name : "AppHeader", 
    data() { 
     return { 
     visible: false 
     } 
    }, 
    methods : { 
     toggleModal() { 
      this.visible = !this.visible; 
     } 
    }, 
    components : { 
     FormModal 
    } 
} 
</script> 

FormModal模板：

<template> 
    <div class="form-conten" v-if="visible"> 
     <!-- Some form markup --> 
    </div> 
</template> 

<script> 
    export default { 
    name : "FormModal", 
    props : ['visible'] 
    } 
</script> 

的想法是，你FormModal监听到来自它的父“看得见的”道具的任何变化。把它想象成一个“只读”变量（在FormModal中）。