时间戳

首页 > 解决方案 > VueJS：如何将实例数据传递给通过匿名事件处理程序调用的实例方法？

javascript - VueJS：如何将实例数据传递给通过匿名事件处理程序调用的实例方法？

问题描述

为了测试 Vue 事件绑定是否可以访问实例状态/数据，我将（实例数据）传入一个调用（实例方法）msg的匿名 fn 。alertMsg(msg)但似乎只有默认事件 obj （在本例中为 Mouse 事件）被传递给alertMsg(msg)而不是msg.

甚至尝试过，(ev, msg)即传递ev（事件 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)
    }
  }
})

如何使这项工作？

谢谢

标签： javascriptvue.jsvuejs2

解决方案

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

https://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”。

推荐阅读