vue冒泡

一、什麼是冒泡

冒泡是指事件的傳播方式，即在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提供了自定義事件，可以方便地在不同的組件之間進行交互。