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

相关内容

热门资讯

王凤英入职小鹏3年终获股权，此... 5月7日消息，小鹏汽车披露的监管及年报信息显示，公司总裁王凤英已正式进入股东名册，入职小鹏3年后股权...
五块钱红酒卖断货，便宜红酒为何... 最近一段时间，中国的酒类消费市场可以说是显得格外奇怪，一方面，各种高端酒特别是白酒的消费量出现了明显...
财联社C50风向指数调查：4月... 财联社5月8日讯（记者 夏淑媛）新一期财联社“C50风向指数”结果显示，市场机构对4月新增人民币贷款...
央视硬刚国际足联拒掏20亿，背... 作者| 史大郎&猫哥 来源| 是史大郎&大猫财经Pro 央视这次太刚了，离世界杯开幕还有1个月，死活...
新CEO上任直接放大招！Air... 快科技5月8日消息，苹果即将上任的CEO John Ternus对未来一系列新产品充满信心，称这些设...
“特朗普拟邀英伟达、波音等CE... 据路透社当地时间5月7日报道，特朗普政府正邀请英伟达、苹果、埃克森美孚、波音等大公司首席执行官，于下...
世界杯，还能看到直播吗？ 2026年美加墨世界杯距离开幕，仅剩一个多月时间。多方信息显示，中央广播电视总台（以下简称“央视”）...
机构警告AI芯片热潮风险，超威... 5月7日，据央视财经，隔夜超威半导体公司(AMD)股价飙升近19%，带动AI芯片热潮持续升温。AMD...
银行员工转走储户1800万最新... 银行员工转走储户1800万最新进展：2名储户已收到银行全部款项
原创 中... 1994年，安徽省的经济格局曾发生过一次戏剧性的转折。在那一年，一座名为安庆的城市，其国内生产总值（...
昆都仑区：政策“蓄力”消费焕新 “一台5000多元的空调，叠加‘国补’和商场的以旧换新活动，能优惠1000元左右，旧机还能免费上门拆...
乐悦置业竞得佛山顺德乐从镇一商... 观点网讯：5月6日，佛山市顺德区乐从镇一商业地块成功出让，由广东省乐悦置业有限公司竞得，乐从南区·邻...
原创 亦... 《爱情没有神话》这部剧，一开始的命运颇为多舛，经历了几次撤档的波折后，终于在观众面前亮相，但其首播的...
美联储34年最大分歧叠加油价飙... 美联储按预期维持利率不变，但内部出现34年来最严重分歧，叠加布油创2022年6月以来新高，美债遭抛售...
支付宝消费券回收后，资金是否支... 摘要： 支付宝消费券回收变现后，资金能否直接转入信用卡？本文解答到账方式的相关规则，帮助用户了解资金...
中医介绍5个化痰穴位！收藏这篇... 很多人忽略了“痰”的危害，觉得咳几下就没事，殊不知，肺里的痰长期堆积，只会一步步加重身体负担。 中医...
黄金平台“杰我睿”涉嫌经济犯罪... 红星资本局5月7日消息，深圳水贝知名金店“杰我睿”兑付困难事件有了新进展。日前，深圳市公安局罗湖分局...
多地出台购房新政促楼市升温 记... 今年的“五一”假期，伴随着多个城市楼市新政密集落地，在叠加市场信心持续修复的作用下，房地产市场热度持...
谁是五一“吸金王”？这5座城市... 来源：市场资讯 （来源：21城市观） 哪座城市成为“五一”假期的大赢家？ 图源：摄图网 作者｜赵晓...
“低招低裁”格局稳固劳动力市场... 智通财经APP获悉，美国上周初请失业金人数在经历前一周回落至近几十年来最低水平后出现小幅反弹，表明尽...