uniapp使用全局組件,

在 Uniapp 中,如果你的組件是應用層組件(例如全局懸浮按鈕、全局通知欄等),并且希望它自動出現在所有頁面而無需在每個頁面模板中手動添加組件標簽,可以通過以下兩種方案實現:


方案一:通過?app.vue?掛載全局組件(推薦)

核心思路:將組件直接寫入?app.vue?的模板中,使其作為應用的根組件的一部分,覆蓋所有頁面。

步驟
  1. 在?app.vue?中引入組件

    <!-- app.vue -->
    <template><!-- 包裹所有頁面 --><view><!-- 全局組件(通過 CSS 固定定位覆蓋在所有頁面上) --><global-component /><!-- 頁面內容 --><page-container /></view>
    </template><script>
    import GlobalComponent from '@/components/GlobalComponent.vue'export default {components: {GlobalComponent}
    }
    </script><style>
    /* 通過固定定位讓組件全局可見 */
    global-component {position: fixed;z-index: 9999;bottom: 20px;right: 20px;
    }
    </style>

  2. 組件特性

    • 組件會持續存在于所有頁面(即使切換頁面也不會銷毀)

    • 適合全局 UI 組件(如懸浮菜單、音樂播放器控件)


方案二:通過?main.js?全局注冊 + 動態掛載

核心思路:將組件注冊為全局組件,并通過 Vue 動態掛載到根節點,實現自動渲染。

步驟
  1. 在?main.js?中全局注冊并掛載

    
    import Vue from 'vue'
    import App from './App'
    import GlobalComponent from '@/components/GlobalComponent.vue'// 全局注冊組件
    Vue.component('global-component', GlobalComponent)// 創建根實例
    const app = new Vue({...App
    })// 動態掛載到根節點(確保組件在 DOM 中)
    const GlobalComponentInstance = new Vue({render: h => h(GlobalComponent)
    }).$mount()document.body.appendChild(GlobalComponentInstance.$el)// 掛載到 Vue.prototype,方便在任何組件內訪問
    Vue.prototype.$globalComponent = GlobalComponentInstance.$children[0];app.$mount()

    組件代碼:

  2. <template><view><view class="GlobalBlock" @click="showShareBoom=false" v-if="showShareBoom"><view class="GlobalBg"></view><img class="share_tips" :src="share_tips" alt="" srcset="" /></view></view>
    </template><script>export default {props: {},data() {return {share_tips: this.$ossPath + 'share_tips.png',showShareBoom: false,}},mounted() {},methods: {close() {this.$emit('cancel')}}}
    </script><style lang="scss" scoped>.share_tips {position: fixed;right: 30rpx;top: 30rpx;width: 460rpx;z-index: 999999;}.GlobalBlock {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999998;.GlobalBg {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, .1);}}
    </style>

  3. 在頁面修改組件的data值:

// 顯示this.$globalComponent.showShareBoom = true;// 隱藏// this.$globalComponent.showShareBoom = false;
  1. 組件特性

    • 組件獨立于頁面結構,直接插入到 DOM 根節點

    • 需通過 CSS 控制位置(如?position: fixed


方案對比

方案適用場景優點缺點
app.vue?掛載需要與頁面交互的全局組件? 組件生命周期與 App 同步
? 可通過 Props 傳遞全局數據
? 需手動控制樣式定位
動態掛載完全獨立于頁面的全局組件? 無需修改頁面結構
? 適合插件式組件
? 需要手動管理 DOM 節點

注意事項

  1. 樣式穿透:如果組件需要覆蓋頁面內容,使用?position: fixed?或?position: absolute?控制位置。

  2. 數據通信:通過 Vuex 或事件總線(Event Bus)實現全局組件與頁面的數據交互。

  3. 性能優化:避免在全局組件中頻繁操作 DOM 或加載過重邏輯。


最終選擇

  • 如果是覆蓋全屏的 UI 組件(如全局彈窗、Loading 動畫),選擇?app.vue?掛載

  • 如果是完全獨立的全局功能組件(如埋點統計、全局事件監聽),選擇?動態掛載

按需選擇方案后,你的組件將無需在任何頁面手動引入或添加標簽,真正實現應用層級的全局使用! 🚀

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/81491.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/81491.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/81491.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

(8)python開發經驗

文章目錄 1 下載python2 pip安裝依賴無法訪問3 系統支持4 下載python文檔5 設置虛擬環境6 編譯安裝python 更多精彩內容&#x1f449;內容導航 &#x1f448;&#x1f449;Qt開發 &#x1f448;&#x1f449;python開發 &#x1f448; 1 下載python 下載地址盡量不要下載最新版…

【原創】基于視覺大模型gemma-3-4b實現短視頻自動識別內容并生成解說文案

&#x1f4e6; 一、整體功能定位 這是一個用于從原始視頻自動生成短視頻解說內容的自動化工具&#xff0c;包含&#xff1a; 視頻抽幀&#xff08;可基于畫面變化提取關鍵幀&#xff09; 多模態圖像識別&#xff08;每幀圖片理解&#xff09; 文案生成&#xff08;大模型生成…

每日算法刷題計劃Day5 5.13:leetcode數組3道題,用時1h

11. 26. 刪除有序數組中的重復項(簡單&#xff0c;雙指針) 26. 刪除有序數組中的重復項 - 力扣&#xff08;LeetCode&#xff09; 思想: 1.我的思想: 雙指針遍歷集合儲存已有元素 2.官方思想&#xff1a; 題目條件有序數組刪除重復元素&#xff0c;所以重復元素都是連續存在…

Transformer 架構在目標檢測中的應用:YOLO 系列模型解析

目錄 Transformer 架構在目標檢測中的應用&#xff1a;YOLO 系列模型解析 一、YOLO 模型概述 二、YOLO 模型的核心架構 &#xff08;一&#xff09;主干網絡 &#xff08;二&#xff09;頸部結構 &#xff08;三&#xff09;頭部結構 三、YOLO 模型的工作原理 &#xf…

一個完整的項目示例:taro開發微信小程序

前一周完成了一個項目&#xff0c;體測成績轉換的工具&#xff0c;沒做記錄&#xff0c;。這次計劃開發一個地圖應用小程序&#xff0c;記錄一下。方便給使用的人。 一、申請微信小程序&#xff0c;填寫相應的信息&#xff0c;取得開發者ID。這個要給騰訊地圖使用的。 二、申…

動態規劃-LCR 166.珠寶的最大價值-力扣(LeetCode)

一、題目解析 frame二維矩陣中每個值代表珠寶的價值&#xff0c;現在從左上角開始拿珠寶&#xff0c;只能向右或向下拿珠寶&#xff0c;到達右下角時停止拿珠寶&#xff0c;要求拿的珠寶價值最大。 二、算法解析 1.狀態表示 我們想要知道的是到達[i,j]為位置時的最大價值&am…

安裝nerdctl和buildkitd腳本命令

#!/bin/bash set -euo pipefail # 檢查是否以root權限運行 if [ "$(id -u)" -ne 0 ]; then echo "錯誤&#xff1a;請使用root權限或sudo運行本腳本" >&2 exit 1 fi # 檢測openEuler系統&#xff08;兼容大小寫&#xff09; detect_distrib…

實現視頻分片上傳 OSS

訪問 OSS 有兩種方式&#xff0c;本文用到的是使用臨時訪問憑證上傳到 OSS&#xff0c;不同語言版本的代碼參考&#xff1a; 使用STS臨時訪問憑證訪問OSS_對象存儲(OSS)-阿里云幫助中心 1.安裝并使用 首先我們要安裝 OSS&#xff1a; npm install ali-oss --save 接著我們…

動態規劃(3)學習方法論:構建思維模型

引言 動態規劃是算法領域中一個強大而優雅的解題方法,但對于許多學習者來說,它也是最難以掌握的算法范式之一。與貪心算法或分治法等直觀的算法相比,動態規劃往往需要更抽象的思維和更系統的學習方法。在前兩篇文章中,我們介紹了動態規劃的基礎概念、原理以及問題建模與狀…

elementplus el-tree 二次封裝支持配置刪除后展示展開或折疊編輯復選框懶加載功能

本文介紹了基于 ElementPlus 的 el-tree 組件進行二次封裝的 TreeView 組件&#xff0c;使用 Vue3 和 JavaScript 實現。TreeView 組件通過 props 接收樹形數據、配置項等&#xff0c;支持懶加載、節點展開/收起、節點點擊、刪除、編輯等操作。組件內部通過 ref 管理樹實例&…

2025年滲透測試面試題總結-安恒[實習]安全工程師(題目+回答)

網絡安全領域各種資源&#xff0c;學習文檔&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各種好玩的項目及好用的工具&#xff0c;歡迎關注。 目錄 安恒[實習]安全工程師 一面 1. 自我介紹 2. 前兩段實習做了些什么 3. 中等難度的算法題 4. Java的C…

網絡編程中的直接內存與零拷貝

本篇文章會介紹 JDK 與 Linux 網絡編程中的直接內存與零拷貝的相關知識&#xff0c;最后還會介紹一下 Linux 系統與 JDK 對網絡通信的實現。 1、直接內存 所有的網絡通信和應用程序中&#xff08;任何語言&#xff09;&#xff0c;每個 TCP Socket 的內核中都有一個發送緩沖區…

TransmittableThreadLocal使用場景

&#x1f680; 為什么要用 TransmittableThreadLocal&#xff1f;一文讀懂線程上下文傳遞問題 在 Java Web 開發中&#xff0c;我們經常用 ThreadLocal 來保存每個請求的用戶信息&#xff0c;例如 userId。但當我們使用線程池或異步方法&#xff08;如 Async&#xff09;時&am…

Milvus(24):全文搜索、文本匹配

1 全文搜索 全文搜索是一種在文本數據集中檢索包含特定術語或短語的文檔&#xff0c;然后根據相關性對結果進行排序的功能。該功能克服了語義搜索的局限性&#xff08;語義搜索可能會忽略精確的術語&#xff09;&#xff0c;確保您獲得最準確且與上下文最相關的結果。此外&…

2000 元以下罕見的真三色光源投影儀:雷克賽恩Cyber Pro1重新定義入門級投影體驗

當性價比遇上技術瓶頸 在 2000元以下的1080P投影儀&#xff0c;單LCD 技術長期主導。而三色光源的DLP和3LCD真1080P都在4000元以上。 單LCD投影為純白光光源&#xff0c;依賴CF濾光膜導致光效低下&#xff0c;普遍存在" 色彩失真 " 等問題。數據顯示&#xff0c;該價…

Maven 下載安裝與配置教程

## 1. Maven 簡介 Maven 是一個項目管理和構建自動化工具&#xff0c;主要用于 Java 項目。Maven 可以幫助開發者管理項目的構建、報告和文檔&#xff0c;簡化項目依賴管理。 ## 2. 下載 Maven 1. 訪問 Maven 官方網站 [https://maven.apache.org/download.cgi](https://maven.…

C# 深入理解類(從類的外部訪問靜態成員)

從類的外部訪問靜態成員 在前一章中&#xff0c;我們看到使用點運算符可以從類的外部訪問public實例成員。點運算符由實 例名、點和成員名組成。 就像實例成員&#xff0c;靜態成員也可以使用點運算符從類的外部訪問。但因為沒有實例&#xff0c;所以最常 用的訪問靜態成員的方…

Java在微服務架構中的最佳實踐:從設計到部署

在2025年的云計算和分布式系統時代&#xff0c;微服務架構已成為構建高可擴展、高可用系統的標準方法&#xff0c;廣泛應用于電商、金融和物聯網等領域。Java憑借其成熟的生態系統、強大的并發支持和跨平臺能力&#xff0c;是微服務開發的首選語言。例如&#xff0c;我們的訂單…

文件讀取漏洞路徑與防御總結

文件讀取漏洞路徑與防御總結 文件讀取漏洞允許攻擊者通過路徑遍歷等手段訪問未授權的文件。以下是Linux和Windows系統中常見敏感路徑的歸納及防御建議&#xff1a; Linux 系統常見敏感路徑 系統關鍵文件&#xff1a; /etc/passwd&#xff1a;用戶賬戶信息&#xff08;可被用來…

react-router基本寫法

1. 創建項目并安裝所有依賴 npx create-react-app react-router-pro npm i 2. 安裝所有的 react router 包 npm i react-router-dom 3. 啟動項目 npm run start router/index.js // 創建路由實例 綁定path elementimport Layout from "/pages/Layout"; import…