VueJS：如何將實例數據傳遞給通過匿名事件處理程序調用的實例方法？

Question

為了測試 Vue 事件綁定是否可以訪問實例狀態/數據，我在一個匿名 fn 中傳遞msg （實例數據），該 fn 調用alertMsg(msg) （實例方法）。 但似乎只有默認事件 obj （在本例中為鼠標事件）被傳遞給alertMsg(msg)而不是msg 。

甚至嘗試過(ev, msg)即傳遞ev (event obj) 和msg作為第二個 arg 但仍然只傳遞了事件 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”。