从实例而不是 html 标签绑定点击

Question

在 vue 中可以直接从 vue 实例绑定按钮点击吗？

我有这个按钮：
<el-button @click="alert_me" class="gf-button" type="primary" style="margin-left: 16px;">Button</el-button>

我不想删除 @click="alert_me" 并像我通常使用 jquery 那样做，但使用 vue。

可能吗？

我的 Vue 实例：

new Vue({
    el: "#app",
    data: {

    },
    methods: {
        alert_me() {
            alert('Hello from vue!');
        }
    },
});

谢谢

Answer 1

您可以利用 addEventListener 并在 mounted 生命周期中调用它。

mounted() {
  document.querySelector('#element').addEventListener('click', event => 
    {
     //handle click
    }
  )
}

Answer 2

如果您需要以编程方式附加点击事件侦听器，可以使用经典 javascript api:

<template>
  <el-button class="gf-button" type="primary">Button</el-button>
</template>

<script>
export default {
   mounted () {
      // jquery would also work if it's installed.
      document.getElementByClassName('gf-button').addEventListener('click', this.alert_me)
   },
   methods: {
      alert_me() {
        console.log('alert')
      }
   }
}
</script>

您可以避免使用 Vue $refs 对象从文档中手动查询元素。

<template>
  <el-button ref="myButton" class="gf-button" type="primary">Button</el-button>
</template>

<script>
export default {
   mounted () {
      this.$refs.myButton.addEventListener('click', this.alert_me)
   },
   methods: {
      alert_me() {
        console.log('alert')
      }
   }
}
</script>

但是，如果您在创建 Vue 组件后就需要该事件，我不建议这样做。它有点监督 Vue 的阴影 dom 优化。

所提供的 @click="" 语法是将点击侦听器附加到 html 元素的最佳方式。

从实例而不是 html 标签绑定点击

Bind click from instance instead of html tag

vue.js

vue-component

vuejs2