Vue.js在实例内部添加事件侦听器？

Question

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

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

    }
})

问题是，我想（在此特定情况下）不必在实际元素中添加v-on：click =“”。这是因为我正在处理CMS，用户可以在其中添加电话号码的链接，而不会在标签中添加vue属性。

有什么办法做到这一点？

谢谢！

Answer 1

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

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

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

这是一个工作示例：

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);
  }
})