Question

我有一个父Vue启用或禁用＆＃34;编辑＆＃34;模式。在非编辑模式下，所有组件都是只读的。

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

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

从父级发出的$ emit消息以新的编辑模式状态发送：

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

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

但是，我似乎无法在我的子组件中收到它！我已经查看了文档，但没有一个示例符合这种情况。这就是我目前所拥有的（在子组件中）：

 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)

我确定我做了一些基本错误的事情，但是文档没有引用这些事件：{}阻止，但我已经在其他代码上看到了它。它也没有显示如何实现一个监听器。

感谢您抽出宝贵时间查看此帖子，如果您能指出正确的方向，我们非常感谢。

Answer 1

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

你真正想要的是简单地将道具传递给你的组件。

在父JS中：

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

在父模板中：

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

然后只需在每个子组件中接受editMode作为道具：

{
    props: ['editMode']
}

您现在可以在孩子的模板中使用editMode。它会跟踪父母的editMode，因此不需要手动事件/观察者。

Answer 2

vue2的工作方式是通过单向数据流，从父级到子级，所以在父组件中你可以拥有

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

<script>

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

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

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

我们已经涵盖了孩子的编辑模式。现在，如果你想将数据从子节点发送到父节点，那么子节点需要向父节点“发出”信号，因为道具是“只读”

你在任何时候做的子组件中的

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

并在您的父组件中使用on“拦截”消息：

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

问候！

Vue：事件方法 - 混乱

2 个答案: