vue冒泡

VGMIL • 2025-01-21 17:30 • 编程

一、什么是冒泡

冒泡是指事件的传播方式，即在DOM树结构中，当某个元素发生事件时，该事件会首先触发该元素自身的处理函数，然后事件会向该元素的父元素传递，直至传递到根元素或者事件被阻止传播。

冒泡是一种从底向上的传递方式，且是默认的传递方式。因此，Vue作为一款基于组件化的前端框架，也采用了默认的冒泡传递方式来处理组件之间的交互事件。

二、冒泡与捕获

冒泡传递方式与捕获传递方式是DOM树中两种不同的事件传播方式。冒泡传递方式是从底向上触发处理函数，而捕获传递则是从顶向下遍历DOM树，找到事件发生的元素节点并触发处理函数。

在Vue中，可以通过添加事件修饰符来控制事件的传播方式。例如，在事件名后加上”.capture”修饰符，即可实现捕获传递方式。另外，还可以通过添加”.stop”修饰符来阻止事件继续传播。


// 示例1
<div @click="handleClick">
  <button @click.stop="handleButton">Button</button>
</div>

// 示例2
<div @click.capture="handleClick">
  <button @click="handleButton">Button</button>
</div>

三、阻止默认行为

在Vue中，可以通过添加”.prevent”修饰符来阻止事件的默认行为，例如链接的跳转或表单的提交等。通过prevent修饰符，用户可以在不阻止事件传播的情况下，阻止事件的默认行为。


// 示例
<a href="www.example.com" @click.prevent="handleClick">Click me</a>

四、组件之间的事件传递

在Vue中，不同的组件之间（包括父子组件和兄弟组件）需要进行事件交互，传递数据等。Vue提供了一种自定义事件，可以在组件之间进行事件传递。

在父子组件之间，父组件可以监听子组件派发的事件。在子组件内，通过$emit方法派发自定义事件，并可以携带参数。


// 父组件
<template>
  <div>
    <Child @myEvent="handleEvent"></Child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: { Child },
  methods: {
    handleEvent(data) {
      console.log(data);
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <button @click="$emit('myEvent', 'Hello, World!')">Click me</button>
  </div>
</template>

在兄弟组件之间，可以通过父组件进行事件的中转。即在父组件中定义一个事件名称，然后在需要传递事件的兄弟组件中派发该事件。父组件在监听到该事件后，再执行相应的处理逻辑。


// 父组件
<template>
  <div>
    <First @myEvent="handleMyEvent"></First>
    <Second @myEvent="handleMyEvent"></Second>
  </div>
</template>

<script>
import First from './First.vue';
import Second from './Second.vue';

export default {
  components: { First, Second },
  methods: {
    handleMyEvent(data) {
      console.log(data);
    }
  }
}
</script>

// First组件
<template>
  <div>
    <button @click="$parent.$emit('myEvent', 'Hello, World!')">Click me</button>
  </div>
</template>

// Second组件
<template>
  <div>
    <button @click="$parent.$emit('myEvent', 'Hello, Vue!')">Click me</button>
  </div>
</template>

五、总结

冒泡是事件传递的一种方式，在Vue中是默认的传递方式。除了冒泡传递方式，Vue还提供了捕获传递方式并支持事件修饰符的使用，可以方便地控制事件传递的方式。在组件之间的事件传递方面，Vue提供了自定义事件，可以方便地在不同的组件之间进行交互。

原创文章，作者：VGMIL，如若转载，请注明出处：https://www.506064.com/n/332224.html