Vue2 Extends 繼承機制與組件復用實踐

extends在某些場景下依然發揮作用,如Options API。子組件將繼承父組件的屬性、方法、生命周期鉤子函數以及混合(mixins)等選項。

注意:子組件可以覆蓋、或繼承擴展父組件的選項。子組件的生命周期鉤子和父組件的鉤子一起執行。

<!-- BaseComponent.vue -->
<template><div class="base-component"><h3>Base Component</h3><slot></slot></div>
</template><script>
export default {data() {return {commonData: 'This comes from base component',};},methods: {baseMethod() {console.log('Executing base method');},},
};
</script>
<!-- DerivedComponent.vue -->
<script>
import BaseComponent from './BaseComponent.vue';export default Vue.extend({extends: BaseComponent,data() {return {// 繼承并擴展數據屬性derivedData: 'This comes from derived component',};},methods: {// 繼承并擴展方法derivedMethod() {this.baseMethod(); // 調用父組件的方法console.log('Executing derived method');},},mounted() {// 繼承并擴展生命周期鉤子console.log('Derived component mounted');},
});
</script><template><!-- 可以重寫或補充父組件的模板 --><div class="derived-component"><h4>Derived Component</h4><p>{{ commonData }}</p><p>{{ derivedData }}</p><button @click="derivedMethod">Click me</button></div>
</template>

擴展:

Vue 3 中最常用的繼承方式是通過組件組合(Composition API)和插槽(Slots)實現,使用解耦原則,而不是傳統的類繼承。

?引用:Vue.js 中的 Extends 繼承機制與組件復用實踐_vue extends-CSDN博客

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

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

相關文章

openSUSE MicroOS不可變Linux

openSUSE MicroOS不可Linux 1、openSUSE MicroOS簡介安裝時可能遇到的問題 2、ssh登錄3、openSUSE MicroOS配置國內軟件源4、系統變更openSUSE MicroOS安裝軟件包方法1&#xff1a;進入事務性更新模式安裝軟件包方法2&#xff1a;繼續快照id基于這個快照進行增量安裝方法3&…

建站SEO優化之站點地圖sitemap

文章目錄 編寫規范小型網站站點地圖小型網站規范示例站點地圖說明 大型網站站點地圖大型網站規范示例以豆瓣站點地圖為例 近期文章&#xff1a; 個人建站做SEO網站外鏈這一點需要注意&#xff0c;做錯了可能受到Google懲罰一文搞懂SEO優化之站點robots.txt網頁常見水印實現方式…

Java分層開發必知:PO、BO、DTO、VO、POJO概念詳解

目錄 引言一、核心概念與定義1、PO&#xff08;Persistent Object&#xff0c;持久化對象&#xff09;2、BO&#xff08;Business Object&#xff0c;業務對象&#xff09;3、DTO&#xff08;Data Transfer Object&#xff0c;數據傳輸對象&#xff09;4、VO&#xff08;View O…

Linux下OLLAMA安裝卡住怎么辦?

網絡環境不理想&#xff0c;經常在官方的linux安裝腳本執行時卡住&#xff0c;其實主要是下載文件卡住&#xff0c;于是我想到了是否可以把其中下載的過程顯化、分步&#xff0c;這樣更可控&#xff0c;于是修改了官方的install.sh #!/bin/sh # This script installs Ollama o…

C++面試(5)-----刪除鏈表中指定值的節點

操作系統&#xff1a;ubuntu22.04 IDE:Visual Studio Code 編程語言&#xff1a;C11 算法描述 給定一個單向鏈表的頭節點 head 和一個特定值 val&#xff0c;要求編寫一個函數來刪除鏈表中所有值等于 val 的節點&#xff0c;并返回修改后的鏈表頭節點。 示例&#xff1a; 輸…

如何用AI賦能學習

由于博主是大學生&#xff0c;今天花費了大量的時間去進行期末的復習&#xff0c;不過從復習中得到了一些學習的靈感&#xff0c;即&#xff1a;如何用AI賦能學習 當我們需要掌握一門新的技能的時候&#xff0c;我們很容易的想到三種辦法&#xff1a;買書自己學&#xff0c;報…

【threejs】每天一個小案例講解:常見材質

代碼倉 GitHub - TiffanyHoo/three_practices: Learning three.js together! 可自行clone&#xff0c;無需安裝依賴&#xff0c;直接liver-server運行/直接打開chapter01中的html文件 運行效果圖 知識要點 1. MeshBasicMaterial&#xff08;基礎網格材質&#xff09; ? 特…

springboot后端與鴻蒙的結合

軟件&#xff1a;鴻蒙devceo3.1&#xff0c;springboot項目采用IDEA 目的&#xff1a; 1、結合springboot后端與鴻蒙的結合運用。 2、Log日志查看console語句的信息。 3、引入 import http from ohos.net.http。 4、調用springboot后端提供的鏈接發送post 5、TextInput的…

minio集群通過mc mirror命令進行定時備份,支持X86和arm兩種架構

文章目錄 前言一、思路二、使用步驟1.下載mc二進制文件2.手動測試備份命令3.配置定時任務4.成功截圖 總結 前言 通過mc mirror命令對minio集群進行定時備份。 一、思路 通過mc mirror命令配合crond定時任務進行周期性的備份 二、使用步驟 1.下載mc二進制文件 wget https:…

三大能力升級,為老項目重構開辟新路徑

在軟件技術飛速迭代的今天&#xff0c;老項目重構是開發者們繞不開的難題。接口實現缺失、業務邏輯矛盾、架構規劃偏離等問題如同攔路虎&#xff0c;讓重構工作舉步維艱。而傳統的 AI 輔助方式&#xff0c;因未充分關聯項目實際情況&#xff0c;猶如 “空中造樓”&#xff0c;難…

AES加密

AES加密算法詳解 AES&#xff08;Advanced Encryption Standard&#xff09;是一種對稱密鑰分組加密算法&#xff0c;用于保護電子數據的安全性。其核心特點是通過相同的密鑰進行加密和解密&#xff0c;屬于對稱加密體系。。以下從核心特性、加密流程及安全性三方面展開說明&a…

關于聯詠(Novatek )自動曝光中Lv值的計算方式實現猜想

目錄 一、常見Lv對應的實際場景 二、常見光圈值 三、最小二乘法計算SV中的系數K

[docker]鏡像操作:關于docker pull、save、load一些疑惑解答

在使用 Docker 的過程中&#xff0c;鏡像管理是極其重要的一環。無論是拉取、保存還是加載鏡像&#xff0c;每一個步驟都可能遇到一些疑問或者誤區。 本文將結合實際案例&#xff0c;對常見的 Docker 鏡像操作問題進行系統性總結&#xff0c;幫你更好地理解 Docker 鏡像的工作機…

SFTrack:面向警務無人機的自適應多目標跟蹤算法——突破小尺度高速運動目標的追蹤瓶頸

【導讀】 本文針對無人機&#xff08;UAV&#xff09;視頻中目標尺寸小、運動快導致的多目標跟蹤難題&#xff0c;提出一種更簡單高效的方法。核心創新在于從低置信度檢測啟動跟蹤&#xff08;貼合無人機場景特性&#xff09;&#xff0c;并改進傳統外觀匹配算法以關聯此類檢測…

什么是滲透測試,對網站安全有哪些幫助?

在網絡安全的戰場中&#xff0c;網站如同暴露在數字世界的堡壘&#xff0c;時刻面臨著黑客攻擊的威脅。而滲透測試&#xff0c;就像是為網站進行一場 “模擬攻防演練”&#xff0c;它以黑客的思維和手段&#xff0c;主動出擊&#xff0c;探尋網站潛在的安全漏洞。究竟什么是滲透…

KU115LPE-V10型FPGA加速卡

KU115LPE-V10是一款基于PCI Express總線通信的FPGA加速類產品。 該產品基于Xilinx公司的的高性能Kintex Ultra-Scale FPGA設計&#xff0c;配置最大兩組DDR4緩存單元&#xff0c;每組最大支持4GB容量&#xff0c;72bit&#xff08;包含ECC&#xff0c;8bit&#xff09;&#x…

【筆記】Blockchain

區塊鏈Blockchain是一種分布式數據庫技術&#xff0c;其核心特點在于去中心化、不可篡改和透明性。它通過一系列按照時間順序排列的數據塊&#xff08;即“區塊”&#xff09;組成&#xff0c;每個數據塊都包含了一定時間內的一系列信息交易&#xff0c;并通過密碼學方法確保這…

GitHub Desktop Failure when receiving data from the peer

目錄 安裝Github Desktop簡易省流助手 解決 Git 克隆時出現的 "Failure when receiving data from the peer" 錯誤1. 網絡連接問題原因&#xff1a;解決辦法&#xff1a; 2. Git 配置問題原因&#xff1a;解決辦法&#xff1a; 3. GitHub 服務故障原因&#xff1a;解…

疏錦行Python打卡 DAY 27 函數專題2:裝飾器

def logger(func):def wrapper(*args, **kwargs):print(f"開始執行函數 {func.__name__}&#xff0c;參數: {args}, {kwargs}")result func(*args, **kwargs)print(f"函數 {func.__name__} 執行完畢&#xff0c;返回值: {result}")return resultreturn wr…

大模型布署如何選擇GPU資源?

當前主流GPU型號及其顯存大小&#xff08;顯存“大小”&#xff09;的詳細分類匯總&#xff0c;結合消費級、專業工作站級及數據中心級三大應用場景&#xff0c;數據綜合自行業常用型號及最新產品信息&#xff08;截至2025年6月&#xff09;&#xff1a; &#x1f3ae; 一、消費…