深入探究Vue事件冒泡

一、事件冒泡是什么？

事件冒泡是一种事件传播方式，当一个元素触发某个事件时，该事件会沿着DOM树向上冒泡，直到到达根元素为止。在这个过程中，子元素的事件也会被父元素捕获并执行。Vue事件冒泡和普通的事件冒泡相同。

//简单的事件冒泡示例

  

  

  

<script>
export default {
  methods: {
    handleClick() {
      console.log('div clicked')
    },
    handleButton() {
      console.log('button clicked')
    }
  }
}
</script>

在上述代码中，当点击button元素时，控制台会先输出"button clicked"，然后再输出"div clicked"，因为事件冒泡，button元素的事件被div元素的事件捕获执行。

二、如何阻止事件冒泡？

有时候我们希望阻止事件冒泡，只想执行当前元素的事件，Vue提供了一个修饰符.stop来实现这个功能。

//示例代码：使用.stop阻止事件冒泡

  

  

  

<script>
export default {
  methods: {
    handleClick() {
      console.log('div clicked')
    },
    handleButton() {
      console.log('button clicked')
    }
  }
}
</script>

在上述代码中，点击button元素时，只会触发handleButton方法，而handleClick方法不会被调用。因为使用了.stop修饰符，阻止了事件冒泡。

三、如何捕获事件？

除了事件冒泡之外，还有一种事件传播方式叫做事件捕获。事件捕获是从根元素向下传播，一直传播到目标元素。Vue提供了.capture修饰符来捕获事件。

//示例代码：使用.capture捕获事件

  

  

  

<script>
export default {
  methods: {
    handleClick() {
      console.log('div clicked')
    },
    handleButton() {
      console.log('button clicked')
    }
  }
}
</script>

在上述代码中，当点击button元素时，控制台会先输出"div clicked"，然后再输出"button clicked"，因为使用了.capture修饰符，先捕获div元素的事件再处理button元素的事件。

四、如何使用once修饰符？

.once修饰符可以让事件只触发一次，当事件触发后，该事件将被自动卸载并取消后续事件处理。

//示例代码：使用.once修饰符

  


<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked')
    }
  }
}
</script>

在上述代码中，当点击div元素时，"clicked"只会被输出一次，因为使用了.once修饰符，事件只触发一次。

五、总结

在Vue中，事件冒泡是一种常见的事件传播方式，可以通过.stop修饰符阻止事件冒泡，也可以通过.capture修饰符抓取事件。.once修饰符让事件只触发一次。