javascript - VueJS - 从子组件到父组件的通信不起作用

Question

我正处于学习 VueJS 的初级阶段，正在构建一个快速但不完整的“待办事项”列表以掌握基础知识。

出于某种原因，我无法在子组件中引发事件，然后让父组件响应该事件，我已经按照文档在子组件中发出事件，然后在父组件中绑定(bind)到它与:

v-on:my-event=""

等等...但事件永远不会在父组件上运行。

示例子组件:

var todoHeader = {
    template: `<nav><button v-on:click="switchView('list')">View List</button><button v-on:click="switchView('add')">Add Todo</button></nav>`,
    methods: {
        switchView: function(view) {
            this.$emit('switch-view', view)
        }
    }
};

监听正在引发的 switch-view 事件的示例父级:

Vue.component('todo-list', {
   data: function() {
   return {
       currentView: ''
   }
},
components: {
  'todo-header': todoHeader,
  'list-todos': listTodos,
  'add-todo': addTodo
},
template: 
   `<div v-on:switch-view="onSwitchView"><todo-header></todo-header>
   <list-todos></list-todos>
   <add-todo></add-todo></div>`,
methods: {
   onSwitchView: function(view) {
       console.log(view);
   }
}
});

我应该看到所选 View 被记录到控制台，但我什么也没得到，有人能看到我做错了什么吗？我的意图是有一个带有两个按钮的导航栏，用于控制当前 View ，列表或添加模式。子添加/列表组件将监听此值并相应地切换。

这是一个 JSFiddle

Answer 1

您应该将事件监听器放在子组件的自定义标记上:

template: 
   `<div>
        <todo-header v-on:switch-view="onSwitchView"></todo-header>
        <list-todos></list-todos>
        <add-todo></add-todo>
    </div>`,

固定 jsFiddle