如何使用 VueJS 阻止组件上的单击事件冒泡？答案

【问题标题】：How to stop click event on component from bubbling down with VueJS?如何使用 VueJS 阻止组件上的单击事件冒泡？
【发布时间】：2019-07-05 19:23:58
【问题描述】：

我已经查看了Vue's event modifiers，我尝试了所有组合，但无法理解为什么没有一个链接示例有效。

我尝试过：click.native.prevent.stop、click.native.prevent、click.native.stop、click.native.self 等等。

它不会阻止事件传播。

Vue.component('btn', {
	data: function(){
    return {
      count: 0
    }
  },
	template: '<button v-on:click="count++">click me: {{ count }}</button>',
});

new Vue({
  el: "#app",
  data: function() {
		return {
    	value: 0
    }
  },
  methods: {
  	valPlus: function(){
    	this.value++;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ value }}
  <br>
  <btn @click.native.stop="valPlus"></btn>
</div>

【问题讨论】：

可能双发，请查看：link
我也经历过，但是谢谢
您的示例在祖先元素上没有任何侦听器，因此它并没有真正显示它是否有效。如果我用@click 包装你的<btn> 是<div>，它不会触发，因为事件已成功停止。

标签： javascript vue.js vue-component

【解决方案1】：

看起来好像您正在使用两个计数器（计数器、值）。第一个使用counter++ 递增，第二个（值）使用父级上的valPlus 事件递增。

我看不到传播发生在哪里。如果单击该按钮，btn 组件将执行counter++ 并且父组件将运行valPlus 方法。它不是传播，它是同一个动作的两个独立事件。

如果您只想要一种行为，您可以删除@click.native.stop，btn 计数器仍将运行。如果这是所需的结果，您可以在按钮上使用 $emit 将计数器传递给父级。

Vue.component('btn', {
	data: function(){
    return {
      count: 0
    }
  },
	template: '<button v-on:click="count++">click me: {{ count }}</button>',
});

new Vue({
  el: "#app",
  data: function() {
		return {
    	value: 0
    }
  },
  methods: {
  	valPlus: function(){
    	this.value++;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ value }}
  <br>
  <btn ></btn>
</div>

【讨论】：