Question

我正处于学习VueJS的初级阶段，正在构建一个快速而肮脏的“todo”列表，以掌握基础知识。

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

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

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

1 个答案: