如何在@click 事件中获取组件实例？

Question

我在 Vue 组件中有一个按钮

<el-button class='range-right' @click='deleteItem(item)'>delete</el-button>

在它的处理程序中，我想调用组件的其他方法。 然而，即使我可以调用 deleteItem 这本身就是一个组件方法，我也无法获取其他方法的实际组件。

有没有办法将 $component 参数传递给 @click 事件？

methods {
  deleteItem: (item, obj) => {
    let api = '/api/train/deleteItem?_id=' + item._id
    let resource = Vue.resource(api)
    let vm = this  // NOT a component
    window.delItem = this
    console.log('deleteItem.this', this)
    resource.delete(api)
    .then(items => {
      console.log('deleted')
      vm.methods.load() //<< fails
    })
  },

Answer 1

我认为问题出在注释中的箭头函数

在此处查看使用function 的示例：

https://jsfiddle.net/rvp6fvwp/

箭头函数绑定到父上下文，如此处所述https://vuejs.org/v2/guide/instance.html#Properties-and-Methods

不要在实例属性或回调上使用箭头函数（例如 vm.$watch('a', newVal => this.myMethod()))。由于箭头函数是 绑定到父上下文，这不会是 Vue 实例 你会想到 this.myMethod 将是未定义的。