Vue中点击事件如何获取元素内容作为函数参数？

你遇到的问题核心是：Vue模板的事件表达式里，this指向的是Vue组件实例，而非触发事件的DOM元素，所以无法通过this.innerText拿到目标内容。下面是几种可靠的实现方式：

方法1：直接在模板中通过$event传递元素文本 #

利用Vue提供的$event内置变量，获取绑定事件的DOM元素的innerText：

<span @click="somefunc($event.currentTarget.innerText)">blah</span>

• $event是当前触发的事件对象
• currentTarget始终指向绑定事件的DOM元素（如果span内部有子元素，target可能指向子元素，用currentTarget更稳妥）

方法2：在方法中通过事件对象获取文本 #

模板里只传递事件对象，在方法内部提取文本：

<span @click="somefunc">blah</span>

对应的组件方法：

methods: {
  somefunc(event) {
    const elementText = event.currentTarget.innerText;
    // 这里写你的业务逻辑
  }
}

这种方式更灵活，适合需要对DOM元素做更多操作的场景。

方法3：（可选）结合ref（适合单个固定元素） #

如果是单个固定的span，也可以用ref直接获取元素：

<span ref="mySpan" @click="somefunc">blah</span>

方法里：

methods: {
  somefunc() {
    const elementText = this.$refs.mySpan.innerText;
    // 业务逻辑
  }
}

注意：如果是v-for循环生成的多个span，ref会变成数组，需要额外处理索引，不如前两种方法通用。

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