Vue中的mixin
创始人
2025-06-01 01:52:28
0次

其实，Mixin并不是Vue专属的，可以理解成一种思想，翻译过来就是 混入 的意思。在很多框架里其实都有Mixin（混入）

对于Mixin而言，官方解释为：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

如果要用大白话解释的话，就是 我们可以将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样做的好处是，可以减少代码冗余并使得后期维护更容易。

Mixin的定义

定义mixin其实很简单，因为它就是一个对象而已，只不过它可以包含Vue组件的一些常见配置，比如data、method或是钩子函数等等。

定义mixin.js

let mixin = {created() {console.log("我是mixin里面的created!")},methods: {hello() {console.log("hello from mixin!")}}
}export default mixin

组件中使用mixin

由于在Vue2时，没有组合式API这一说法，所以mixin可能会更好解决很多问题。但是到了Vue3，这种方式已经不被推荐了

如果硬要用也是可以的，例如

let mixin = {methods:{hello(){console.log("Hello Mixin");}}
}
export default mixin

最后就是公共的mixin定义好以后，可以根据不同的业务场景，能分为两种：局部混入和全局混入。

局部混入的话，和组件的按需加载是差不多的，需要用的再引入

全局混入的话，代表在项目的任何组件中都可以使用mixin

总结：

  • mixin中的生命周期函数会和组件的生命周期函数一起合并执行

  • mixin中的data数据在组件中也可以使用

  • mixin中的方法在组件内部可以直接调用

  • 生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：【瑞萨 MCU】开发环境搭建之 e2 studio 安装

下一篇：Pytorch模型转Caffe

相关内容

热门资讯

原创 本... 本周（1月5日至1月9日），A股三大指数集体大涨。截至周五收盘，上证指数累计上涨3.82%，深证成指...
巨星农牧定增“劫”：募资从17... （图片系AI生成） 当传统“猪周期”被打乱，生猪价格波动不仅带弱企业业绩，还影响企业融资，巨星农牧（...
上市首日暴涨109%！一群95... 本文时代财经 作者：庞宇 图源：视觉中国 继智谱AI之后，又一家中国大模型明星企业登陆港股。 1月...
原创 赋... 中国财富网讯在“健康中国2030”战略深入推进与“双碳”目标全面落地的双重引领下，港股非酒精饮料行业...
中铁五局被停业整顿 近日，中铁五局集团有限公司（以下简称“中铁五局”）被住房和城乡建设部处以停业整顿180日的行政处罚。...
HOKA韩国总代理CEO被爆掌... 01.COSTA回应茶叶保质期100年 02.继“小便门”后海底捞再曝火锅异物事件 03.汇源集团宣...
原创 1... 文|有风 编辑|有风 2026年元旦早上9点，我盯着手机屏幕上的i茅台APP，手指悬在"立即抢购"按...
轻舟智航增资至11.5亿 增幅... 天眼查工商信息显示，近日，北京轻舟智航智能技术有限公司发生工商变更，注册资本由8.5亿人民币增至11...
GTC泽汇资本:白银触顶回调 ... 来源：市场资讯 1月8日，近期白银市场在每盎司80美元上方遭遇明显阻力，难以维持此前涨幅，这种走势引...
德国出口创一年半以来最大降幅，... 1月9日，德国联邦统计局公布数据显示，2025年11月，德国出口额出现了一年半以来的最大降幅。根据数...
MiniMax盘中一度涨超80... 1月9日，“人均95后”的全球化AI大模型公司MiniMax（股票代码：0100.HK）正式登陆香港...
黄金狂飙4490美元！白银跟涨... 2026年1月9日，贵金属市场再度掀起狂澜！纽约期金价格突破4490美元/盎司，日内涨幅达0.66%...
马斯克xAI将在密西西比州投资... 据路透社1月9日消息，特斯拉（TSLA.US）首席执行官马斯克（Elon Musk）旗下的人工智能初...
派拉蒙重申30美元每股收购华纳... 观点网讯：1月8日，派拉蒙重申以每股30美元收购华纳兄弟的要约。 派拉蒙周四发表声明表示，有关收购方...
原创 狄... 狄仁杰是大家耳熟能详的人物，古代有《狄公案》，现代有电视剧《狄仁杰》。他和包拯一样，是古代著名的断案...
每日收评沪指时隔10年重新站上... 财联社1月9日讯，市场震荡拉升，沪指高开高走突破4100点，深成指涨超1%。沪深两市成交额3.12万...
Bcl-xL蛋白检测新工具：南... 当肿瘤细胞在体内疯狂增殖时，科学家们发现，一个名为Bcl-xL的蛋白，往往是其背后的“生存大师”。它...
MiniMax去年完成增资 1月9日，第二家AI大模型公司登陆港股，MiniMax在港交所主板上市，首日开盘较165港元/股发行...
创业仅4年，从天使轮12亿到市... 作者丨薛皓皓 编辑丨巴里 2022年，MiniMax的初次登场，并非以复杂的模型参数，而是通过一款让...
深圳去年末贷款余额近10万亿 ... 来源：21世纪经济报道 21世纪经济报道记者 曹媛 深圳报道 近日，中国人民银行深圳市分行、国家外...