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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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; 一、消费…