javascript - 如何使用VueJS阻止组件上的点击事件冒泡？

Question

相关:VueJS: @click.native.stop = "" possible?

我已经浏览过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>

Answer 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>