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>

如何阻止组件的单击事件通过VueJS冒泡？

1 个答案: