記錄--@click和@click.native有什麼區別，如何阻止第三方組件內部的冒泡

来源:https://www.cnblogs.com/smileZAZ/archive/2023/09/06/17683071.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一.@click和@click.native的區別 vue @click.native 原生點擊事件： 1，給vue組件綁定事件時候，必須加上native ，不然不會生效（監聽根元素的原生事件，使用 .native 修飾符） 2，等同於在 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

一.@click和@click.native的區別

vue @click.native 原生點擊事件：

1，給vue組件綁定事件時候，必須加上native ，不然不會生效（監聽根元素的原生事件，使用 .native 修飾符）

2，等同於在子組件中：

子組件內部處理click事件然後向外發送click事件：$emit("click".fn)

不多說看代碼：

直接在封裝組件上使用@click，看看有什麼效果

封裝組件wrap-component.vue

 <template>
   <button>封裝組件的點擊事件</button>
 </template>
 ​
 <script>
 export default {
   name: 'wrapComponent'
 }
 </script>
 ​
 <style>
 ​
 </style>
使用封裝組件HomeView.vue
 <template>
   <div class="home">
     <h2>父組件</h2>
 ​
     <wrap-component @click="handleClick"></wrap-component>
   </div>
 </template>
 ​
 <script>
 import wrapComponent from '@/components/wrap-component.vue'
 ​
 export default {
   name: 'HomeView',
   components: {
     wrapComponent
   },
   methods: {
     handleClick () {
       console.log('點擊了封裝組件的按鈕')
     }
   }
 }
 </script>
 ​

頁面效果

點擊按鈕，控制台並沒有列印內容

當我們給封裝組件中的按鈕添加點擊事件

 <template>
   <button @click="handleClick">封裝組件的點擊事件</button>
 </template>
 ​
 <script>
 export default {
   name: 'wrapComponent',
   methods: {
     handleClick () {
       this.$emit('click')
     }
   }
 }
 </script>
 ​
 <style>
 ​
 </style>

頁面效果

發現控制台列印了內容，說明觸發了封裝組件內部的按鈕的點擊事件

當我們使用@click.native呢？

封裝組件wrap-component.vue

 <template>
   <button>封裝組件的點擊事件</button>
 </template>
 ​
 <script>
 export default {
   name: 'wrapComponent'
 }
 </script>
 ​
 <style>
 ​
 </style>

使用封裝組件HomeView.vue

 <template>
   <div class="home">
     <h2>父組件</h2>
 ​
     <wrap-component @click.native="handleClick"></wrap-component>
   </div>
 </template>
 ​
 <script>
 import wrapComponent from '@/components/wrap-component.vue'
 ​
 export default {
   name: 'HomeView',
   components: {
     wrapComponent
   },
   methods: {
     handleClick () {
       console.log('點擊了封裝組件的按鈕')
     }
   }
 }
 </script>
 ​

頁面效果

也列印了內容，說明與上面通過子組件$emit出來一樣。

那可以把@click.native當作是上面$emit的簡寫嗎？

當我們給封裝組件添加其他內容呢？

封裝組件wrap-component.vue

 <template>
   <div>
     <button>封裝組件的點擊事件</button>
     <ul>
       <li>測試</li>
       <li>測試</li>
       <li>測試</li>
       <li>測試</li>
     </ul>
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'wrapComponent',
   methods: {
   }
 }
 </script>
 ​
 <style>
 ​
 </style>
 ​

頁面效果：

點擊封裝組件的任意一個區域都可以列印內容。

說明@click.native並不是通過$emit方式的簡寫，在只有單個元素點擊事件的情況下可以當作是。

native就是把組件變回原生DOM的一種方式，相當於給組件綁定原生事件

特別說明

針對vue-element-ui中的el-button

 //這個庫已經在某些地方把原生的click做了處理了，因為不使用native，照常成功
 <el-button type="primary" @click="handleLogin">Sign in</el-button>

二.其他修飾符

在事件處理器中可以使用event.preventDefault()（阻止原生事件）， event.stopPropagation()（阻止事件冒泡）。 vue.js為 v-on 提供兩個 事件修飾符：.prevent 與 .stop，讓html就可以實現這兩個功能，不需要再在js中單獨寫

 <!-- 阻止單擊事件繼續傳播 -->
 <a v-on:click.stop="doThis"></a>
 ​
 <!-- 提交事件不再重載頁面 -->
 <form v-on:submit.prevent="onSubmit"></form>
 ​
 <!-- 修飾符可以串聯 -->
 <a v-on:click.stop.prevent="doThat"></a>
 ​
 <!-- 添加事件監聽器時使用事件捕獲模式 -->
 <!-- 即元素自身觸發的事件先在此處理，然後才交由內部元素進行處理 -->
 <div v-on:click.capture="doThis">...</div>
 ​
 <!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
 <!-- 即事件不是從內部元素觸發的 -->
 <div v-on:click.self="doThat">...</div>

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，

用 v-on:click.prevent.self 會阻止所有的點擊，

而 v-on:click.self.prevent 只會阻止對元素自身的點擊

 <!-- 點擊事件將只會觸發一次 -->
 <a v-on:click.once="doThis"></a>
 ​
 <!-- 不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上,該處理函數只會觸發一次 -->
 <wrap-component @click.native.once="clickTree"></wrap-component>

不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。

Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。

 <!-- 滾動事件的預設行為 (即滾動行為) 將會立即觸發 -->
 <!-- 而不會等待 `onScroll` 完成  -->
 <!-- 這其中包含 `event.preventDefault()` 的情況 -->
 <div v-on:scroll.passive="onScroll">...</div>

這個 .passive 修飾符尤其能夠提升移動端的性能。

不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的預設行為。

使用@click.native.stop來阻止第三方組件的點擊事件

場景

在父組件中有一個點擊事件，但是在父組件內部又使用其他三方組件，因為是第三方組件所以不能通過在第三方組件內部通過@click.stop的方式來阻止冒泡。現在希望的情況就是，在點擊第三方組件封裝的點擊事件的時候，不想讓其冒泡其父組件，觸發父組件的點擊事件。

場景代碼

父組件HomeView.vue

 <template>
   <div class="home" @click="handleParentClick">
     <h2>父組件</h2>
 ​
     <div>
       <wrap-component></wrap-component>
     </div>
   </div>
 </template>
 ​
 <script>
 import wrapComponent from '@/components/wrap-component.vue'
 ​
 export default {
   name: 'HomeView',
   components: {
     wrapComponent
   },
   methods: {
     handleParentClick () {
       console.log('觸發了父組件的點擊事件')
     }
   }
 }
 </script>

封裝組件wrap-component.vue

 <template>
   <div @click="handleSonClick">
     <button>封裝組件的點擊事件</button>
     <ul>
       <li>測試</li>
       <li>測試</li>
       <li>測試</li>
       <li>測試</li>
     </ul>
   </div>
 </template>
 ​
 <script>
 export default {
   name: 'wrapComponent',
   methods: {
     handleSonClick () {
       console.log('觸發了封裝組件的點擊事件')
     }
   }
 }
 </script>
 ​
 <style>
 ​
 </style>

頁面效果

觸發了封裝組件的點擊事件，也冒泡到了父組件，觸發了父組件的點擊事件

解決

在第一點的時候，介紹了native的作用，它把組件變回原生DOM的一種方式，相當於給組件綁定原生事件，那我們可以直接在組件上使用@click.native.stop來阻止第三方組件內部點擊事件的冒泡嗎？

父組件HomeView.vue

 <template>
   <div class="home" @click="handleParentClick">
     <h2>父組件</h2>
 ​
     <div>
       <wrap-component @click.native.stop></wrap-component>
     </div>
   </div>
 </template>
 ​
 <script>
 import wrapComponent from '@/components/wrap-component.vue'
 ​
 export default {
   name: 'HomeView',
   components: {
     wrapComponent
   },
   methods: {
     handleParentClick () {
       console.log('觸發了父組件的點擊事件')
     }
   }
 }
 </script>
 ​

果然是可以的

擴展

一個組件的話可以通過上面描述的方式來解決，如果父組件有多個第三方組件呢，難道要給每個組件添加@click.native.stop嗎？如果不閑麻煩的話，當然是可以的。

也有更加簡便的方法

父組件HomeView.vue

 <template>
   <div class="home" @click="handleParentClick">
     <h2>父組件</h2>
 ​
     <div @click.stop>
       <wrap-component></wrap-component>
       <wrap-demo></wrap-demo>
     </div>
   </div>
 </template>
 ​
 <script>
 import wrapComponent from '@/components/wrap-component.vue'
 import wrapDemo from '@/components/wrap-demo.vue'
 ​
 export default {
   name: 'HomeView',
   components: {
     wrapComponent,
     wrapDemo
   },
   methods: {
     handleParentClick () {
       console.log('觸發了父組件的點擊事件')
     }
   }
 }
 </script>
 ​

把使用第三方組件統一包裹起來，對其div使用@click.stop來阻止冒泡

總結

  1. @click.native就是把組件變回原生DOM的一種方式，相當於給組件綁定原生點擊事件。
  2. 可以通過這個機制來阻止第三方組件內部封裝的冒泡
  3. 如果是直接綁定在原生的div之類的元素上的話，是不需要使用.native的，通常只需要用其他幾個尾碼。
  4. .native是用來阻止原生的dom事件，一般想要阻止組件內原生的dom事件就需要用.native搭配其他尾碼來實現
  5. @click.stop阻止組件$emit的click事件
  6. @click.native.stop阻止組件內原生的dom的click事件

本文轉載於:

https://juejin.cn/post/7274883755478335546

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 讀SQL學習指南（第3版）筆記13_讀後總結與感想兼導讀
    ![](https://img2023.cnblogs.com/blog/3076680/202309/3076680-20230905123241037-972099517.png) # 1. 基本信息 SQL學習指南(第3版) Learning SQL, Third Edition [美] 艾倫 ...
  • 彈性資料庫連接池探活策略調研(一)——HikariCP
    # 調研背景： 資料庫連接建立是比較昂貴的操作（至少對於 OLTP），不僅要建立 TCP 連接外還需要進行連接鑒權操作，所以客戶端通常會把資料庫連接保存到連接池中進行復用。連接池維護到彈性資料庫（JED）的長連接，彈性資料庫預設不會主動關閉客戶端連接（除非報錯），但一般客戶端到彈性資料庫之間還會有負 ...
  • 用戶案例 | 蜀海供應鏈基於 Apache DolphinScheduler 的數據表血緣探索與跨大版本升級經驗
    ![file](https://img2023.cnblogs.com/other/2685289/202309/2685289-20230906144112614-1233246750.png) ## 導讀 蜀海供應鏈是集銷售、研發、採購、生產、品保、倉儲、運輸、信息、金融為一體的餐飲供應鏈服務企 ...
  • 國內某頭部理財服務提供商基於白鯨調度系統建立統一調度和監控運維
    ![file](https://img2023.cnblogs.com/other/2685289/202309/2685289-20230906105454530-376816477.jpg) > 導讀：國內某頭部理財服務提供商成立於 2019 年，是股份制銀行中首批獲准籌建、首家獲准開業、首家成 ...
  • “數據驅動”時代，企業為什麼需要實時湖倉？
    當談到[數據湖](https://www.dtstack.com/dtengine/easylake?src=szsm)的時候，大家都在說，可以把所有數據（結構化/半結構化/非結構化）一股腦都丟進去，進行統一的元數據管理。然後上層計算對接，進行[流批計算](https://www.dtstack.c ...
  • 玖章算術獲評“浙江省創新型中小企業”
    浙江省工業和信息化廳開展了2023第二季度創新型中小企業評價工作，玖章算術以優秀的自主創新能力通過認定，成為浙江省2023年度創新型中小企業。玖章算術聚焦於雲計算與數據管理基礎技術領域，擁有豐富的研發經驗和專業技術團隊。NineData是新一代的雲原生智能數據管理平臺，包含了數據複製、SQL開發、數... ...
  • 由 Array.includes 函數引發對引用數據類型的思考
    `` 數組的includes方法在日常的編程中比較常用到，其作用就是判斷某一數據是否在數組中，通常來說，數組中的數據如果是數字，布爾值，或者字元串的話，都是能夠進行判斷的 例如： ``` [1,2,3,4].includes(3) // true [1,2,3,4].includes(5) // f ...
  • Vue源碼學習(二):<templete>渲染第一步,模板解析
    好家伙， 1.<template>去哪了 在正式內容之前,我們來思考一個問題, 當我們使用vue開發頁面時,<tamplete>中的內容是如何變成我們網頁中的內容的? 它會經歷四步: 解析模板：Vue會解析<template>中的內容，識別出其中的指令、插值表達式（{{}}），以及其他元素和屬性。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類