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

我正处于学习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)
        }
    }
};

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

---

下面是一个

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

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

模板：
`
你赢了我！我相信也是这样+是的，我想就是这样。检查JSFIDDLEH，nem vi q era br色调！玛斯·达纳达，奥克·塔切托，塔切托，奥拉！：DPerfect，你能解释一下为什么它们需要在子组件标签上，以及为什么它以前不起作用吗？谢谢，因为标记基本上就是您定义该组件实例的地方。实例就是发出事件的实例。因此，标签应该是从组件接收事件的标签。父div（您放置它的位置）与子组件无关。
template: 
   `<div>
        <todo-header v-on:switch-view="onSwitchView"></todo-header>
        <list-todos></list-todos>
        <add-todo></add-todo>
    </div>`,