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

相关内容

热门资讯

走进小城看消费丨江西资溪：低碳...   夏日时节下午4点，江西省抚州市资溪县大觉山景区漂流终点依然热闹。来自南昌的游客余鑫漂流结束后没有...
【中原晨会0625】市场分析专... 来源：市场资讯 （来源：中原证券研究所） 本期重点研报目录 【中原策略】市场分析：电子半导体领涨 ...
南向资金连买4日！低费率+可月... 6月25日早盘，港股红利资产震荡整理。截至11时14分，港股红利低波ETF招商(520550)下跌0...
618成交破百万！紫荆花用一套... 一年一度的618年中大促，是消费市场的晴雨表，也是品牌间最激烈的角力场。当各大品牌在直播间里铆足了劲...
原创 黄... 2026年6月25日的国际金价已经从前期的5500美元高点跌到4200美元下方，累计跌幅超过22%，...
英伟达CEO：Vera Rub... 截至9:38，中证半导体材料设备主题指数（931743）涨2.36%创新高；权重股中，中微公司涨3....
再被催债16亿！“钢铁大王”戴... 澎湃新闻记者 贺梨萍 因“铁本事件”入狱五年的戴国芳重返钢铁行业，但他并没有完成从阶下囚再到“钢铁大...
周三原油价格下跌 随着美国和伊朗在和平谈判中取得进展，越来越多的油轮公开穿越霍尔木兹海峡，原油在战时的价格上涨已经蒸发...
这种蛋白是大脑衰老的开关 这种蛋白是大脑衰老的开关 清晨，假设一位五十岁左右的王女士发现自己常常把手机放在熟悉的抽屉里又找不到...
信通院牵头算力Token出海生... 盘面上，截至11：04，中证科创创业50指数（931643）涨1.68%，创历史新高；权重股中，芯原...
海外 774 亿营收背后：日本... 文 | 游戏价值论 6月23日，彭博社报道了腾讯正在围绕出售多家日本游戏工作室少数股权开展谈判，包...
餐饮“抢人”大战：把店开到公交... 作者 |餐饮老板内参 内参君 医院、公交站、演唱会…餐饮品牌，正在无孔不入 在北京儿童医院，肯德基...
快讯 | 外资扫货！陈翊庭：港... 港交所行政总裁陈翊庭在接受《中国证券报》专访时指出，国际资本对中国资产的看法已彻底扭转，布局中国市场...
2777.77元！A股“股王”... 25日早盘，昨天创下历史新高的A股“股王”联讯仪器，今天上午继续走强，盘中股价再度刷新历史新高。 截...
原创 今... 欧洲自己的媒体直接下结论，欧盟衰退躲不掉，内部分裂拦不住，现在就连欧洲顶尖工业巨头，都偷偷在用中国的...
黄仁勋股东大会放言：本轮AI基... 在当地时间6月24日的英伟达（NVDA.O）2026年度股东大会上，股东批准了该公司全部10名董事会...
国际油价大跌 新华社消息， 纽约原油期货主力合约价格24日盘中跌破每桶70美元，为伊朗战事爆发以来首次。 市场分析...
马云带队插秧，什么信号？ 一场别开生面的“务农”，让外界看到了一个不一样的阿里巴巴。 近日，阿里巴巴合伙人、高德董事长刘振飞在...
全球最大产能，最高丰度达99.... 本文转自【科技日报】； 6月23日，高丰度硼-10同位素技术暨产业化成果发布会在山东省东营市举办，全...
黄金大跳水！金饰克价年内暴跌近... 25日，现货黄金盘中震荡，截至发稿，报3985.070美元/盎司，跌0.17%。 当地时间24日，...