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

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

您可以在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>

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

1 个答案: