时间戳

首页 > 解决方案 > Vue.js 在实例内添加事件监听器？

javascript - Vue.js 在实例内添加事件监听器？

问题描述

昨天刚开始学习 Vue，我喜欢它。当用户点击带有电话号码的锚点时，我试图触发一个事件：

var phoneNumbers = new Vue({
    el: "a[href^='tel:']",
    methods: {
        onClick() { console.log('a phone number was clicked'); }

    }
})

问题是，我想（在这种特殊情况下）不必将 v-on:click="" 添加到实际元素中。这是因为我正在处理一个 CMS，用户可以在其中添加指向电话号码的链接，而他们不会将 vue 属性添加到标记中。

有什么方法可以做到这一点？

谢谢！

标签： javascriptvue.js

解决方案

您可以通过 引用组件的根 DOM 元素this.$el。

您可以在挂钩中添加点击监听器mounted（您还需要在destroyed挂钩中删除监听器）：

mounted() {
  this.$el.addEventListener('click', this.onClick);
},
destroyed() {
  this.$el.removeEventListener('click', this.onClick);
}

这是一个工作示例：

Vue.config.productionTip = false;
Vue.config.devtools = false;

var phoneNumbers = new Vue({
  el: "a[href^='tel:']",
  methods: {
    onClick() { 
      console.log('a phone number was clicked'); 
    }
  },
  mounted() {
    this.$el.addEventListener('click', this.onClick);
  },
  destroyed() {
    this.$el.removeEventListener('click', this.onClick);
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<a href="tel:5555555555">555-555-5555</a>

推荐阅读