0

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

目标是当AppHeader单击按钮时，FormModal应切换可见性。我遇到的问题是理解 Vue 的单向数据流。如何将事件传递回父 ( App) fromAppHeader以使其知道改变表单的可见性？

(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文件，它是我所有模板的父级。

（应用程序.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 的单向数据流，我不确定如何处理这种情况。

4

1 回答 1

1

在您的应用程序标头中，您需要绑定"visible" data field到"visible"子（表单模式）组件中的属性。这意味着子组件内的"visible "data fieldinAppHeader和"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 中）。

于 2016-11-18T17:09:57.940 回答