<button @click="handleClick">點(diǎn)擊我</button>

這里綁定了一個(gè) click 事件，并且綁定的函數(shù)是 handleClick。

<!-- 阻止默認(rèn)行為 -->
<button @click.prevent="handleClick">點(diǎn)擊我</button>

<!-- 阻止事件冒泡 -->
<button @click.stop="handleClick">點(diǎn)擊我</button>

<!-- 使用事件捕獲模式 -->
<button @click.capture="handleClick">點(diǎn)擊我</button>

<!-- 只有當(dāng)事件是從事件源本身觸發(fā)時(shí)才觸發(fā)回調(diào)函數(shù) -->
<button @click.self="handleClick">點(diǎn)擊我</button>

<!-- 只觸發(fā)一次回調(diào)函數(shù) -->
<button @click.once="handleClick">點(diǎn)擊我</button>

<!-- 提高頁(yè)面滾動(dòng)的流暢度 -->
<button @click.passive="handleClick">點(diǎn)擊我</button>

具體示例：

當(dāng)一個(gè)鏈接被點(diǎn)擊時(shí)，會(huì)觸發(fā) click 事件。如果鏈接沒(méi)有設(shè)置 href 屬性，則默認(rèn)的行為是不進(jìn)行跳轉(zhuǎn)，

但如果設(shè)置了 href 屬性，則會(huì)跳轉(zhuǎn)到 href 指定的頁(yè)面。
在這種情況下，可以使用 .prevent 和 .stop 修飾符來(lái)阻止鏈接的默認(rèn)跳轉(zhuǎn)行為和冒泡傳播。


我們給鏈接設(shè)置了 href 屬性，并綁定了 click 事件和 handleLinkClick 方法。
同時(shí)，我們?cè)阪溄由鲜褂昧?.prevent 和 .stop 修飾符來(lái)阻止默認(rèn)的跳轉(zhuǎn)行為和冒泡傳播。
<template>
  <div @click="handleDivClick">//上層點(diǎn)擊事件。用了檢測(cè)下面的點(diǎn)擊事件有沒(méi)有冒泡上來(lái)
    <a  rel="external nofollow"  @click.prevent.stop="handleLinkClick">點(diǎn)擊我</a>
  </div>
</template>

<script>
export default {
  methods: {
    handleLinkClick() {
      console.log('內(nèi)部事件————鏈接被點(diǎn)擊了');
    },
    handleDivClick() {
      console.log('外部事件————div 被點(diǎn)擊了');
    }
  }
};
</script>
在點(diǎn)擊鏈接時(shí)，控制臺(tái)會(huì)輸出 【內(nèi)部事件————鏈接被點(diǎn)擊了】
鏈接被點(diǎn)擊了，而不會(huì)進(jìn)行跳轉(zhuǎn)。
同時(shí)，由于使用了 .stop 修飾符，事件也不會(huì)向上層元素冒泡傳播，因此點(diǎn)擊鏈接時(shí)不會(huì)觸發(fā)外部事件 handleDivClick 方法。

1、如果我們把 .prevent 修飾符去掉，點(diǎn)擊鏈接時(shí)會(huì)進(jìn)行跳轉(zhuǎn)。說(shuō)明默認(rèn)行為存在，但是被阻止了。

2、如果把 .stop 修飾符去掉，點(diǎn)擊鏈接時(shí)會(huì)觸發(fā) handleDivClick 方法。說(shuō)明點(diǎn)擊事件冒泡了。

這說(shuō)明了 .prevent 和 .stop 修飾符的區(qū)別，.prevent 可以阻止默認(rèn)行為，.stop 可以阻止冒泡傳播。

默認(rèn)行為指的是元素在觸發(fā)某些事件時(shí)，瀏覽器會(huì)執(zhí)行的預(yù)設(shè)行為。
例如，當(dāng)用戶(hù)點(diǎn)擊一個(gè)鏈接時(shí)，瀏覽器默認(rèn)會(huì)跳轉(zhuǎn)到該鏈接所指定的 URL。當(dāng)用戶(hù)提交一個(gè)表單時(shí)，瀏覽器默認(rèn)會(huì)向服務(wù)器發(fā)送表單數(shù)據(jù)并刷新頁(yè)面。
這些行為是瀏覽器內(nèi)置的，可以通過(guò) JavaScript 代碼來(lái)阻止或修改。

export default {
  onLoad() {
    console.log('頁(yè)面加載完成');
  },
  onReady() {
    console.log('頁(yè)面初次渲染完成');
  },
  onShow() {
    console.log('頁(yè)面展示');
  },
  onHide() {
    console.log('頁(yè)面隱藏');
  },
  onUnload() {
    console.log('頁(yè)面卸載');
  }
}

// 發(fā)送自定義事件
uni.$emit('myEvent', {data: '自定義事件參數(shù)'});

// 監(jiān)聽(tīng)自定義事件
uni.$on('myEvent', (data) => {
  console.log('接收到自定義事件', data);
});
這里通過(guò) uni.$emit 發(fā)送了一個(gè)名為 myEvent 的自定義事件，
并傳遞了一個(gè)參數(shù) {data: '自定義事件參數(shù)'}。在需要監(jiān)聽(tīng)該事件的地方，
可以使用 uni.$on 方法來(lái)監(jiān)聽(tīng)該事件，并在回調(diào)函數(shù)中處理事件。

<button @click="handleClick">點(diǎn)擊我</button>

methods: {
  handleClick($event) {
    console.log('事件類(lèi)型', $event.type);
    console.log('事件源', $event.target);
    console.log('當(dāng)前組件', $event.currentTarget);
    console.log('自定義數(shù)據(jù)', $event.detail);
  }
}