VueJS - 从子组件到父组件的通信不工作

Question

我正处于学习VueJS的开始阶段,正在构建一个快速而肮脏的"待办事项"列表,以掌握基础知识.

出于某种原因,我在子组件中引发事件然后让父组件响应该事件时遇到了问题,我已经按照文档在子组件中发出事件,然后在父组件中绑定它:

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

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

这是一个JSFiddle

Answer 1

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

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

修正了jsFiddle