javascript - VueJS : How to pass instance data to an instance method called via anonymous event handler?

Question

为了测试 Vue 事件绑定(bind)是否可以访问实例状态/数据，我在匿名 fn 中传递 msg (实例数据)，该函数调用 alertMsg(msg) (实例)方法)。但似乎只有默认事件 obj(在本例中为鼠标事件)被传递给 alertMsg(msg) 而不是 msg。

甚至尝试了 (ev, msg) 即传递 ev (event obj) 和 msg 作为第二个参数，但仍然只有事件 obj通过

模板

<div id="app">
  <p>{{ msg }}</p>
  <div @click="msg => { alertMsg(msg)}">test</div>
</div>

Vue 实例

new Vue({
  el: '#app',
  data() {
    return {
      msg: 'Hello World'
    }
  },
  methods: {
    alertMsg(e, msg) {
      console.log(e)
      alert(msg)
    }
  }
})

如何做到这一点？

谢谢

Answer 1

您必须根据文档使用特殊的 $event 变量:

https://v2.vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers

如:

    <div id="app">
      <p>{{ msg }}</p>
      <div @click="alertMsg($event, msg)">test</div>
    </div>

如果您想直接从函数内访问“msg”，请使用“this.msg”。