Vue：事件方法 - 混乱

我有一个父Vue，它启用或禁用“编辑”模式。在非编辑模式下，所有组件都是只读的。Vue：事件方法 - 混乱

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

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

从父的$放出消息，与新的编辑模式状态发送：

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)

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

感谢您花时间阅读本文，如果您能指引我正确的方向，非常感谢。

来源

2017-04-25 Anthony

这是Vue 1还是Vue 2？ –

Vue 2.道歉忘记提及这一点。 – Anthony

更多信息：http://www.wapgee.com/story/s/vuejs-forms-two-way-data-binding-and-v-model –

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

你真正想要的只是将一个道具传递给你的组件。

在父JS：

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

在父模板：

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

然后简单地接受editMode在每个子组件的道具：

{ 
    props: ['editMode'] 
}

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

来源

2017-04-25 02:53:19

谢谢！这解决了它，再加上它非常简单，就像Vue的其余部分一样。 – Anthony

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) 
     } 
    } 
}

和子组件使用道具来获得数据

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

我们已经介绍了孩子的编辑模式。现在，如果你想从孩子到家长发送数据，则孩子需要“发出”信号给父母，作为道具的“只读”

的子组件，你在任何时候

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

做

，并在你的父组件你“拦截”的消息上使用：

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

问候！

来源

2017-04-25 02:58:29

感谢您的回复。它帮助更清楚地了解事情。 – Anthony

您的方法一定会在以后使用，特别是对于更复杂的父母/孩子互动。目前，我只需要在儿童中启用编辑模式。但我可以看到父母需要知道孩子状况的情况。 – Anthony

Vue：事件方法 - 混乱

回答

相关问题