vue中的mixin(局部混入、全局混入)

一、mixin是什么

Mixin是面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类;Mixin类通常作为功能模块使用,在需要该功能时“混入”,有利于代码复用又避免了多继承的复杂

Vue中的mixin,先来看一下官方定义

mixin(混入),提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。本质其实就是一个js对象,它可以包含我们组件中任意功能选项,如data、components、methods、created、computed等等

在Vue中我们可以局部混入跟全局混入

局部混入

定义一个 mixins.js 文件,此文件中可以混入Vue中所有的设置项,methods、computed、watch、data、生命周期函数等都可以。

// mixin.js
export const myMixin = {methods: {sharedMethod() {console.log('This method is shared between components.');}}
};
// MyComponent.vue
<template><div><button @click="sharedMethod">Click me</button></div>
</template><script>
import { myMixin } from './mixin.js';export default {mixins: [myMixin],// 组件自己的选项...
};
</script>

全局混入

全局混入表示混入到Vue对象中,Vue下的所有组件都会使用混入的方法,一定要注意,是所有的组件,所以,在使用全局混入的时候要确保所有的组件都会使用到。

如果在使用混入的过程中出现冲突,除生命周期钩子外,其余的都以本组件中的为主,混入的不生效;生命周期钩子产生冲突是先执行混入的声明周期钩子,再执行本组件的生命周期钩子。 

//main.js文件
import {mixin1, mixin2} from "../mixins.js"Vue.mixin(mixin1)
Vue.mixin(mixin2)
//如果不想创建单独的类,也可以直接写一个配置对象
Vue.mixin({created: function () {console.log("全局混入")}
})

PS:全局混入常用于插件的编写,使用全局混入需要特别注意,因为它会影响到每一个组件实例(包括第三方组件)

二、使用场景

在日常的开发中,我们经常会遇到在不同的组件中经常会需要用到一些功能相同或者相似的代码(造成代码冗余),这时可以通过Vue的mixin功能将相同或者相似的代码抽取出来。

举个例子

定义一个modal弹窗组件,内部通过isShowing来控制显示

const Modal = {template: '#modal',data() {return {isShowing: false}},methods: {toggleShow() {this.isShowing = !this.isShowing;}}
}



定义一个tooltip提示框,内部通过isShowing来控制显示

const Tooltip = {template: '#tooltip',data() {return {isShowing: false}},methods: {toggleShow() {this.isShowing = !this.isShowing;}}
}



通过观察上面两个组件,发现两者的逻辑是相同,代码控制显示也是相同的,这时候mixin就派上用场了

首先抽出共同代码,编写一个mixin

const toggle = {data() {return {isShowing: false}},methods: {toggleShow() {this.isShowing = !this.isShowing;}}
}

两个组件在使用上,只需要引入mixin

const Modal = {template: '#modal',mixins: [toggle]
};const Tooltip = {template: '#tooltip',mixins: [toggle]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/828335.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何远程访问路由器?

远程访问路由器是一种方便的技术&#xff0c;使用户可以远程操作和配置他们的网络设备。无论用户身在何处&#xff0c;只要有互联网连接&#xff0c;就可以远程访问家庭或办公室的路由器。在这篇文章中&#xff0c;我将介绍远程访问路由器的优势以及一种名为【天联】的组网产品…

数据结构之双链表的相关知识点及应用

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构 目录 双链表的实现 初始化双链表 在双链表中尾插数据 在双链表中尾删数据 在双链表中头插数据 在双链表中头删数据 在双…

低代码技术与仓储管理的新纪元:革命性的供应链变革

引言 在当今数字化时代&#xff0c;企业对于创新和效率的追求越发迫切。在这样的背景下&#xff0c;低代码技术应运而生&#xff0c;成为企业数字化转型的重要工具之一。低代码技术的崛起为企业提供了一种快速、灵活、成本效益高的开发方式&#xff0c;大大缩短了软件开发周期…

POJO,Entity,model,domain,view,DTO,VO,Param这些分别都是什么含义?怎样理解?

目录 1. 前言 2. POJO的含义 3. entity(实体) 4. model(模型) 5. domain(域) 6. view(视图) 7. DTO(数据传输对象) 8. VO(真正视图层) 9. Param(参数) 10. 总结 1. 前言 在日常开发的过程中&#xff0c;如果我们接手一个新的项目之后&#xff0c;通常会有各种各样的…

浅谈免杀下的持久化

文章目录 前记注册表计划任务COM劫持后记reference 前记 实战中持久化的手段常用的就是加服务、添改注册表、加计划任务、劫持等&#xff0c;这里探索c/c下的维权免杀 注册表 用户级 \HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run \HKEY_CURRENT_USER…

代码随想录算法训练营DAY36|C++贪心算法Part.5|435.无重叠区间、763.划分字母区间、56. 合并区间

文章目录 435.无重叠区间按右边界排序CPP代码 按左边界排序如何判断相邻区间是否重叠如何判断一下一个区间与当前相邻区间是否重叠总结CPP代码 763.划分字母区间思路伪代码实现CPP代码 56. 合并区间思路CPP代码 435.无重叠区间 力扣题目链接 文章链接&#xff1a;435.无重叠区间…

Python 0基础_变现_38岁_day 15(匿名函数)

匿名函数&#xff1a; 不用定义函数名&#xff0c;无需使用def关键字&#xff0c;使用lambda将函数写成一行&#xff1b;#使用匿名函数定义一个两个数字相加的函数add lambda x,y : xy #使用变量接收匿名函数的内容&#xff0c;且变量名作为调用函数的变量名&#xff1…

EasyRecovery数据恢复软件2025破解版安装包下载

EasyRecovery数据恢复软件的主要功能及使用教程。coco玛奇朵可以提供一个概要和简化的教程&#xff0c;以便你了解其基本内容和操作步骤。 EasyRecovery绿色破解下载网盘链接: https://pan.baidu.com/s/1_6NmcOh_Jmc-DGc4TJD-Mg?pwddq4w 提取码: dq4w 复制这段内容后打开百度…

强固型工业电脑在称重系统+叉车电脑,称重量体扫码一体机,物流分拣线工作站行业应用

称重系统叉车电脑行业应用 背景介绍 在叉车上安装称重传感器&#xff0c;通过对举升压力的自动检测&#xff0c;将压力信号转换为电流或电压信号&#xff0c;经过A/D转换&#xff0c;使模拟信号变为数字信号&#xff0c;经微处理器进行数据处理后通过蓝牙、串口或者USB接口将称…

深度优先搜索与广度优先搜索,你知道它们的区别吗?

什么是深度优先搜索&#xff1f; 深度优先搜索&#xff08;DFS&#xff0c;Depth-First Search&#xff09;是算法中的一种重要的搜索策略。它的核心思想是“深入探索&#xff0c;直至无路可走&#xff0c;然后再回溯”。这种策略在许多问题中都有着广泛的应用&#xff0c;例如…

dial tcp 192.168.0.190:443: connect: connection refused

1、场景 用nerdctl登录镜像仓库192.168.0.190&#xff08;Harbor&#xff09;&#xff0c;报错 ERRO[0006] failed to call tryLoginWithRegHost error"failed to call rh.Client.Do: Get \"https://192.168.0.190/v2/\": dial tcp 192.168.0.190:…

【数据结构】图(Graph)

文章目录 概念图的存储方式邻接矩阵邻接矩阵表示法邻接矩阵表示法的特点 邻接表邻接表表示法邻接表表示法的特点邻接表表示法的定义与实现查找插入删除其它构造函数析构函数创建图输出图 图的遍历深度优先遍历&#xff08;DFS&#xff09;广度优先遍历 图的连接分量和生成树生成…

Ubuntu20.04安装 nginx1.23.1

1、下载 wget http://nginx.org/download/nginx-1.23.1.tar.gz 2、 安装相关依赖包 sudo apt-get install libpcre3 libpcre3-dev sudo apt-get install zlib1g zlib1g-dev sudo sudo apt-get install openssl sudo sudo apt-get install libssl-dev 3、 解压安装 tar -zx…

C#设计树形程序界面的方法:创建特殊窗体

目录 1.TreeView控件 2.实例 &#xff08;1&#xff09;Resources.Designer.cs &#xff08;2&#xff09;Form1.Designer.cs &#xff08;3&#xff09;Form1.cs &#xff08;4&#xff09;生成效果 以树形来显示程序的菜单&#xff0c;可以更直观、更快捷地对窗体进行…

科技赋能无人零售

科技赋能无人零售&#xff0c;使其具备以下独特优势&#xff1a; 1. 全天候无缝服务 &#xff1a;无人零售店依托科技&#xff0c;实现24小时不间断运营&#xff0c;不受人力限制&#xff0c;满足消费者随时购物需求&#xff0c;尤其惠及夜间工作者、夜猫子及急需购物者&…

Android --- 常见UI组件

TextView 文本视图 设置字体大小&#xff1a;android:textSize"20sp" 用sp 设置颜色&#xff1a;android:textColor"#00ffff" 设置倍距(行距)&#xff1a;android:lineSpacingMultiplier"2" 设置具体行距&#xff1a;android:lineSpacingExtra&q…

基于RK3588的全国产鸿蒙边缘计算工控机在智能交通ETC收费系统的应用

1.1 产品简介 基于智能交通、工业互联等行业快速智能化发展的需求&#xff0c;以 OpenHarmony 为框架开发嵌入 HamonyOS&#xff0c;打造了具有高智能、高可靠、高安全的自主 可控的边缘处理器 XM-RK3588。 图 1-1 边缘处理器 HamonyOS强化 IoT 互联互动能力&#xff0c;让边缘…

程序员裁员潮:技术变革下的职业危机探讨及分析

背景 一对来自中国的工程师夫妇在美国洛斯阿图市不幸身亡&#xff0c;疑因谷歌裁员致悲剧发生。这对夫妇在谷歌公司担任高级工程师&#xff0c;他们的离世无疑给公司带来了巨大的损失。同时&#xff0c;这也引起了人们对职场环境的关注&#xff0c;尤其是对于外籍人士在职场中的…

软考 系统架构设计师系列知识点之软件可靠性基础知识(2)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之软件可靠性基础知识&#xff08;1&#xff09; 所属章节&#xff1a; 第9章. 软件可靠性基础知识 第1节 软件可靠性基本概念 9.1 软件可靠性基本概念 9.1.1 软件可靠性定义 软件可靠性&#xff08;Software Reliabi…

Arcgis 定义投影、投影变换、导出栅格为tif、矢量转tif

目录 一、Arcgis 定义投影 1、定义投影 2、设置平移 二、投影变换 1、栅格数据的投影变换 2、矢量数据的投影变换