当前位置: 首页 > news >正文

Vue Mixin混入机制

在 Vue.js 中,Mixin(混入)是一种可复用代码的机制,用于在多个组件之间共享逻辑。通过混入,可以将通用功能提取到一个独立的文件中,然后在组件中引入并使用,而无需重复代码。


基本概念

Mixin 是一个对象,可以包含组件中的任何选项,比如数据、生命周期钩子、方法等。当一个组件使用混入时,Mixin 的内容会被“混入”到该组件中。


定义和使用

  1. 定义一个 Mixin
// myMixin.js
export default {data() {return {sharedData: 'Hello from mixin',};},methods: {sharedMethod() {console.log('This is a shared method');},},created() {console.log('Mixin created hook');},
};
  1. 在组件中使用 Mixin
<template><div><p>{{ sharedData }}</p><button @click="sharedMethod">Call Mixin Method</button></div>
</template><script>
import myMixin from './myMixin';export default {mixins: [myMixin], // 引入 mixin
};
</script>

选项合并规则

  • 数据(data)
    • 组件和 Mixin 的 data 会合并,但如果存在同名属性,组件的数据会覆盖 Mixin 的数据。
  • 生命周期钩子
    • 组件和 Mixin 的生命周期钩子会按顺序调用。Mixin 的钩子先执行,组件的钩子后执行。
  • 方法(methods)
    • 如果方法名冲突,组件的方法会覆盖 Mixin 的方法。

示例:

export default {data() {return {mixinData: 'Mixin',};},created() {console.log('Mixin created');},methods: {commonMethod() {console.log('Mixin method');},},
};

如果组件中也定义了相同名称的选项:

export default {data() {return {mixinData: 'Component',};},created() {console.log('Component created');},methods: {commonMethod() {console.log('Component method');},},
};

结果:

  • 数据:mixinData 的值为 'Component'(组件覆盖 Mixin)。
  • 生命周期:控制台输出:
    Mixin created
    Component created
    
  • 方法:调用 commonMethod 输出 'Component method'

全局混入

Vue 提供了全局混入功能,适用于全局共享逻辑。但要谨慎使用,因为它会影响所有组件。

Vue.mixin({created() {console.log('Global mixin created');},
});

优缺点

优点
  1. 代码复用,减少重复。
  2. 清晰分离通用逻辑和组件特定逻辑。
缺点
  1. 如果多个 Mixin 发生冲突,调试可能比较困难。
  2. 数据来源可能不清晰,增加复杂性。

替代方案

Vue 3 中推荐使用 Composition API 替代 Mixin。它提供了更灵活和直观的方式来管理和共享逻辑。

示例(使用 Composition API 替代 Mixin)

import { ref, onCreated } from 'vue';export function useSharedLogic() {const sharedData = ref('Hello from Composition API');const sharedMethod = () => {console.log('This is a shared method');};onCreated(() => {console.log('Composition API created hook');});return { sharedData, sharedMethod };
}

在组件中:

<script>
import { useSharedLogic } from './useSharedLogic';export default {setup() {const { sharedData, sharedMethod } = useSharedLogic();return { sharedData, sharedMethod };},
};
</script>

总结:在 Vue 2 中,Mixin 是非常实用的代码复用机制;在 Vue 3 中,更推荐使用 Composition API 替代混入,以获得更好的可读性和灵活性。

相关文章:

Vue Mixin混入机制

在 Vue.js 中&#xff0c;Mixin&#xff08;混入&#xff09;是一种可复用代码的机制&#xff0c;用于在多个组件之间共享逻辑。通过混入&#xff0c;可以将通用功能提取到一个独立的文件中&#xff0c;然后在组件中引入并使用&#xff0c;而无需重复代码。 基本概念 Mixin 是…...

数据库类型建表

接着上次的数据库笔记&#xff1a; 初始数据库 &#xff08;是博主自己写的&#xff09; 1.数据库类型 1.1数值类型 数据类型大小说明对应JAVA类型BIT[(M)]M指定位数&#xff0c;默认值为1二进制数&#xff0c;M的范围从1—64&#xff0c;存储数值范围从0—2^M-1常用Bool…...

iOS 18 导航栏插入动画会导致背景短暂变白的解决

问题现象 在最新的 iOS 18 系统中,如果我们执行导航栏的插入动画,可能会造成导航栏背景短暂地变为白色: 如上图所示:我们分别向主视图和 Sheet 弹出视图的导航栏插入了消息,并应用了动画效果。可以看到,前者的导航栏背景会在消息插入那一霎那“变白”,而后者则没有任何…...

深度学习之人脸检测

在目标检测领域可以划分为了人脸检测与通用目标检测&#xff0c;往往人脸这方面会有专门的算法&#xff08;包括人脸检测、人脸识别、人脸其他属性的识别等等&#xff09;&#xff0c;并且和通用目标检测&#xff08;识别&#xff09;会有一定的差别&#xff0c;着主要来源于人…...

解决前后端发版本时候,手动清除浏览器缓存

在.html页面中添加标签 后端配置nginx,让index.html不缓存 location /index.html { add_header Cache-Control “no-cache, no-store”; }在vite.config.ts中添加 rollupOpyions: { output: { // 输出编译后的文件名称&#xff1a;【文件名称.时间戳】、【文件名称.版本号.…...

mysql8.4+mysql router读写分离

以下为容器环境内搭建 准备工作: 拉取镜像: 镜像版本mysql8.4container-registry.oracle.com/mysql/community-router8.4 下载mysql_shell mysql-shell-9.0.1-linux-glibc2.17-x86-64bit.tar.gz 下载地址: https://downloads.mysql.com/archives/shell/ 参考 这里对这篇文章…...

鸿蒙NEXT开发-用户通知服务的封装和文件下载通知

注意&#xff1a;博主有个鸿蒙专栏&#xff0c;里面从上到下有关于鸿蒙next的教学文档&#xff0c;大家感兴趣可以学习下 如果大家觉得博主文章写的好的话&#xff0c;可以点下关注&#xff0c;博主会一直更新鸿蒙next相关知识 专栏地址: https://blog.csdn.net/qq_56760790/…...

RHCE——系统的延迟任务及定时任务

延迟任务的发起 在系统中我们可以使用 at 命令来发起延迟任务 at 命令执行是调用的是 atd 服务&#xff0c;即使系统最小化安装 atd 也会被安装到系统中 at 任务信息存放在系统中 /var/spool/at 目录中 at 任务的日志文件被存放到 /var/log/cron 中 at 任务执行时如果遇…...

ForEach刷新UI机制

官网地址&#xff1a;ForEach 在ArkUI中&#xff0c;提供了ForEach循环语句&#xff0c;用来初始化一个列表数据&#xff0c;我们知道&#xff0c;当ForEach中的数组发生变化时&#xff0c;会引起UI的刷新&#xff0c;但是究竟如何变化&#xff0c;会引起UI怎样的刷新&#xf…...

机器学习(贝叶斯算法,决策树)

朴素贝叶斯分类 贝叶斯分类理论 假设现有两个数据集&#xff0c;分为两类 我们现在用p1(x,y)表示数据点(x,y)属于类别1(图中红色圆点表示的类别)的概率&#xff0c;用p2(x,y)表示数据点(x,y)属于类别2(图中蓝色三角形表示的类别)的概率&#xff0c;那么对于一个新数据点(x,y)…...

实验十三 生态安全评价

1 背景及目的 生态安全是生态系统完整性和健康性的整体反映&#xff0c;完整健康的生态系统具有调节气候净化污染、涵养水源、保持水土、防风固沙、减轻灾害、保护生物多样性等功能。维护生态安全对于人类生产、生活、健康及可持续发展至关重要。随着城市化进程的不断推进&…...

二级等保要求及设备有哪些?

《网络安全法》规定我国信息系统实际等级保护制度&#xff0c;不同等保等级要求不同&#xff1a; 二级等保&#xff08;指导保护级&#xff09;&#xff1a;等级保护对象受到破坏后&#xff0c;会对公民、法人和其他组织的合法权益产生严重损害&#xff0c;或者对社会秩序和公…...

无人机的动力系统节能——CKESC电调小课堂12

1.优化电机和螺旋桨配置 精准匹配&#xff1a;根据无人机的设计用途和负载要求&#xff0c;精确选择电机和螺旋桨。确保电机的功率、扭矩等参数与螺旋桨的尺寸、螺距等完美匹配。例如&#xff0c;对于轻型航拍无人机&#xff0c;选用功率合适的小尺寸电机搭配高效的小螺旋桨&a…...

人机打怪小游戏(非常人机)

按q攻击 按箭头进行控制 玩家是 怪是* 攻击是^ ​ ​ #include<bits/stdc.h> #include<Windows.h> #include<conio.h> #define fr(i,a,b) for(int ia;i<b;i) #define rd(a,b) rand()%(b-a1)a using namespace std; int x16,y21,dx[4]{-1,0,1,0},dy[4]{0,…...

SpringBoot 集成 Sharding-JDBC(一):数据分片

在深入探讨 Sharding-JDBC 之前&#xff0c;建议读者先了解数据库分库分表的基本概念和应用场景。如果您还没有阅读过相关的内容&#xff0c;可以先阅读我们之前的文章&#xff1a; 关系型数据库海量数据存储策略-CSDN博客 这篇文章将帮助您更好地理解分库分表的基本原理和实现…...

django-ninja 实现cors跨域请求

要在Django-Ninja项目中实现跨域&#xff08;CORS&#xff09;&#xff0c;你可以使用django-cors-headers库&#xff0c;这是一个专门用于处理跨域资源共享&#xff08;CORS&#xff09;问题的Django应用程序。以下是具体的步骤和配置&#xff1a; 安装依赖&#xff1a; 使用p…...

【论文阅读】InstructPix2Pix: Learning to Follow Image Editing Instructions

摘要&#xff1a; 提出了一种方法&#xff0c;用于教导生成模型根据人类编写的指令进行图像编辑&#xff1a;给定一张输入图像和一条书面指令&#xff0c;模型按照指令对图像进行编辑。 由于为此任务获取大规模训练数据非常困难&#xff0c;我们提出了一种生成配对数据集的方…...

常用在汽车PKE无钥匙进入系统的高度集成SOC芯片:CSM2433

CSM2433是一款集成2.4GHz频段发射器、125KHz接收器和8位RISC&#xff08;精简指令集&#xff09;MCU的SOC芯片&#xff0c;用在汽车PKE无钥匙进入系统里。 什么是汽车PKE无钥匙进入系统&#xff1f; 无钥匙进入系统具有无钥匙进入并且启动的功能&#xff0c;英文名称是PKE&…...

【第四课】rust声明式宏理解与实战

目录 前言 理解宏 实战宏 前言 上一课在介绍vector时&#xff0c;我们再一次提到了rust中的宏&#xff0c;在初始化vector时使用了vec!宏&#xff0c;当时补了一句有机会会好好说明一下rust中的宏&#xff0c;并且写一个hashmap宏来初始化hashmap。想了想一直介绍基本语法还…...

渗透测试--Linux下的文件传输方法

渗透测试过程中&#xff0c;我们经常会需要文件传输&#xff0c;本文主要探讨Linux主机上我们对文件传输的方法。 编码方式 Linux 检查MD5 md5sum id_rsa Linux Base64 编码/解码 编码 cat id_rsa |base64 -w 0;echo 解码 echo -n LS0tLS1CRUdJTiBPUEVOU1NIIFBSSVZBVE…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中,数据清…...