插槽内点击触发父组件方法报错：Invalid handler for event 'click': got undefined

嗨，这个问题其实很常见——你在插槽里的输入框绑定点击事件时多写了this.！

在Vue的模板语法里，绑定事件的时候**不需要手动加this**来调用组件方法。因为模板内部的上下文默认就是当前组件的实例，直接写方法名run就足够让Vue找到你在父组件methods里定义的run()方法了。

你写成@click="this.run"的时候，这里的this在插槽的渲染环境里并没有指向你预期的父组件实例（插槽内容虽然定义在父组件，但渲染时的上下文逻辑和普通模板有点区别），导致Vue找不到对应的方法，所以才会抛出"Invalid handler for event 'click': got undefined"的错误。

把代码改成下面这样就可以正常运行了：

<input type="text" @click="run">

简单总结一下：Vue模板绑定里直接用方法名/属性名就行，只有在JavaScript代码块（比如方法内部、计算属性里）才需要用this来访问组件的实例成员~

内容的提问来源于stack exchange，提问作者panthro