Vue子组件向父组件传值报错：TypeError: handler.apply is not a function

你报错的核心原因很明确：父组件把data里的布尔变量fileSelected直接绑定成了事件处理函数。

Vue的事件绑定@xxx="xxx"要求右侧必须是可执行的函数，而你写的@is-file-changed="fileSelected"里，fileSelected是data中定义的布尔值false。当子组件触发is-file-changed事件时，Vue会尝试把这个布尔值当作函数去执行，自然就会抛出TypeError: handler.apply is not a function的错误。

修正方法 #

父组件需要定义一个专门的事件处理方法，用来接收子组件传递的值并更新fileSelected：

1. 修改父组件模板，绑定事件处理方法：

<file-selector v-model="contract.file" @is-file-changed="handleFileChanged" />

2. 在父组件的methods中添加处理方法：

data() {
  return {
    fileSelected: false,
  };
},
methods: {
  handleFileChanged(isChanged) {
    // 接收子组件传递的true，赋值给fileSelected
    this.fileSelected = isChanged;
  }
}

子组件的代码没有问题，保持原样即可。

内容的提问来源于stack exchange，提问作者World's famous people