Vue：事件方法 - 混乱

Question

我有一个启用或禁用 [=36=] 模式的父 Vue。在非编辑模式下，所有组件都是只读的。

我已经通过数据对象实现了这个并且一切正常。

我已经在子组件中拆分了一些组件。

从父级发送了一条带有新编辑模式状态的 $emit 消息：

  methods: {
    toggleMode () {
      this.editMode = !this.editMode
      this.$emit('edit-mode-change', this.editMode)
    }

使用 Vue DevTools 我可以看到消息已发出。

但是，我似乎无法在我的子组件中接收到它！我查看了文档，但是 none 的示例与这种情况相匹配。这是我目前拥有的（在子组件中）：

 methods: {
   onEditModeChange: function (mode) {
     console.log('mode is', mode)
     this.editMode = mode
   }

也尝试过：

 events: {
   onEditModeChange: function (mode) {
     console.log('mode is', mode)
     this.editMode = mode
   }

此外，我收到如下浏览器控制台错误：

[Vue warn]: Invalid handler for event "edit-mode-change": got false 
(found in <Dimensions> at /home/anthony/Projects/Towers-Vue/src/components/assets/Dimensions.vue)

我确定我做错了一些基本错误，但文档没有引用 events: {} 块，但我在其他代码中看到了它。它也没有说明如何实现侦听器。

感谢您抽出宝贵时间查看此内容post，如果您能指出正确的方向，我们将不胜感激。

Answer 1

在 Vue 2 中，事件只能横向或向上流动，不能向下流动。

您真正想要的是简单地将一个 prop 传递到您的组件中。

在parent JS:

toggleMode () {
    this.editMode = ! this.editMode;
}

在 parent 模板中：

<child-component-1 :editMode="editMode"></child-component-1>
...same for others...

然后在每个 child 组件中简单地接受 editMode 作为道具：

{
    props: ['editMode']
}

您现在可以在 child 的模板中使用 editMode。它将跟踪 parent 的 editMode，因此无需手动 events/watchers。

Answer 2

vue2 的工作方式是通过 one-direction 数据流，从 parent 到 child，所以在 parent 组件中你可以

<template>
 <child-component :isEditing="editMode"></child-component>
</template>

<script>

export default {
    methods: {
        toggleMode () {
          this.editMode = !this.editMode
          this.$emit('edit-mode-change', this.editMode)
        }
    }
}

并在 child 组件中使用 props 获取数据

Vue.component('child-component', {
  props: ['isEditing'],
  template: '<span>edit mode: {{ isEditing }}</span>'
})

我们已经涵盖了 child 的编辑模式。现在如果你想从 child 发送数据到 parent，那么 child 需要 "emit" 一个信号到 parent，因为道具是 "read only"

在 child 组件中你在任何时候做

someMethod() {
    this.$emit('editDone', dataEdited);
}

并且在您的 parent 组件中您 "intercept" 使用 on:

的消息

<template>
    <child-component 
        :isEditing="editMode"
        @editDone="someParentMethod"></child-component>
</template>

您好！

Vue：事件方法 - 混乱

Vue: Event Methods- Confusion

events

method-signature

vue.js