获取绑定事件的元素

Question

我正在使用 Vue 中的 @click 属性将事件绑定到元素（它的行为与 javascript .onclick 属性相同）。

我遇到的问题是，当通过从子 DOM 节点传播单击事件来调用事件时，我将子 DOM 元素作为target 属性，我找不到干净的方法（不搜索父母，如该元素可能嵌套在内部深处）以访问事件在事件回调中注册到的 DOM 元素。

<td @click="onCellClick($event)">
  <div class="text">
    <span>default</span>
  </div>
</td>

Answer 1

我认为混淆在于事件的target vs currentTarget

event.target 是触发事件调度程序触发的内容，而 event.currentTarget 是您分配监听器的内容。

Vue.component('cell', {
  template: '#cell',
  methods: {
    onCellClick: function (e) {
      console.log(e.currentTarget)
    }
  }
});

Answer 2

你可以使用refs:

<td @click="onCellClick($event)" ref="cell1">
  <div class="text">
    <span>default</span>
  </div>
</td>

onCellClick(evt){
   console.log(this.$refs.cell1)
}