当前位置: 首页 > 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…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...