Vue — 详解mixins混入使用

news/2024/3/29 16:07:19/文章来源:https://blog.csdn.net/gxdzi/article/details/129140197

前言
当我们的项目越来越大,我们会发现组件之间可能存在很多相似的功能,你在一遍又一遍的复制粘贴相同的代码段(data,method,watch、mounted等),如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixins特性

一、什么是Mixins?
mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中,当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来,这样就可以提高代码的重用性,使你的代码保持干净和易于维护。

二、什么时候使用Mixins?
当我们存在多个组件中的数据或者功能很相近时,我们就可以利用mixins将公共部分提取出来,通过 mixins封装的函数,组件调用他们是不会改变函数作用域外部的。

三、如何创建Mixins?
在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象,所以应该以对象的形式来定义myMixins,在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性,并通过export导出该对象
在这里插入图片描述
四、如何使用Mixins?
在需要调用的组件中引入myMixins.js文件,然后在export default 中引入你需要的对象即可
在这里插入图片描述
五、Mixins的特点
【5.1】方法和参数在各组件中不共享,虽然组件调用了mixins并将其属性合并到自身组件中来了,但是其属性只会被当前组件所识别并不会被共享,也就是其他组件无法从当前组件中获取到mixins中的数据和方法。

①首先我们在混合对象myMixins.js中定义一个age字段和getAge方法

export const myMixins = {components:{},data() {return {age: 18,}},mounted() {this.getAge()},methods: {getAge() {console.log(this.age)}}
}

② 组件1中对num进行+1操作

import { myMixins } from "@/mixins/myMixins.js";
export default {mixins: [myMixins],data() {return {}},created() {this.age++},
}

③组件2不进行操作

export default {mixins: [myMixins],data() {return {}},
}

④我们分别切换到两个页面,查看控制台输出。会发现组件1改变了age里面的值,组件2中age值还是混合对象的初始值,并没有随着组件1的增加而改变
在这里插入图片描述
【5.2】引入mixins后组件会对其进行合并,将mixins中的数据和方法拓展到当前组件中来,在合并的过程中会出现冲突,接下来我们详细了解Mixins合并冲突

六、Mixins合并冲突
【6.1】值为对象(components、methods 、computed、data)的选项,混入组件时选项会被合并,键冲突时优先组件,组件中的键会覆盖混入对象的

①我们在混入对象增加age属性、getAge1方法和getAge2方法

// myMixins.js
export const myMixins = {components:{},data() {return {age: 18,}},methods: {getAge1() {console.log("age1 from mixins =", this.age )},getAge2() {console.log("age2 from mixins =", this.age )},}
}

②我们在引入了myMixins文件的组件中,增加age属性、getAge1方法和getAge3方法

// template.vue
import { myMixins } from "@/mixins/myMixins.js";
export default {mixins: [myMixins],data() {return {age: 20,}},mounted() {this.getAge1();this.getAge2();this.getAge3();},methods: {getAge1() {console.log('age1 from template =', this.age)},getAge3() {console.log('age3 from template =', this.age)},}
}

③我们会发现,组件中的age覆盖了混合对象的age,组件的getAge1方法覆盖了混合对象的getAge1方法
在这里插入图片描述
【6.2】值为函数(created、mounted)的选项,混入组件时选项会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用

// myMixins.js
export const myMixins = {components:{},data() {return {}},created() {console.log('xxx from mixins')}
}
import { myMixins } from "@/mixins/myMixins.js";
export default {mixins: [myMixins],data() {return {}},created() {console.log('xxx from template')}
}

在这里插入图片描述
七、与vuex的区别

vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。

Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。

八、与公共组件的区别

组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。

Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。

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

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

相关文章

DJI 无人机 Onboard SDK ROS 功能包demo运行

DJI 无人机 Onboard SDK ROS 功能包demo运行demo功能准备测试环境运行 dji sdk 节点运行 demo 节点自动飞行任务航点自动飞行兴趣点环绕自动飞行飞行控制本地坐标位置控制搭建好 Onboard SDK ROS 的开发环境后,功能包自身具备一些写好的demo功能案例 dji sdk 的节点…

接口服务熔断方案

一.熔断方式1.中间件支持熔断2.支持节点级熔断2.支持url前缀匹配二.配置1.延迟方式expression "LatencyAtQuantileMS(50.0) > 100"//50%延迟超过100ms2.失败率方式expression "NetworkErrorRatio() > 0.30" //失败率超过30%3.组合方式expression …

Python学习-----文件操作(读写定位篇)

目录 前言: 1.打开文件 (open) 关闭文件(close) 2.文件的读取(文件变量名 f) (1)整体读取(read) (2)读取一行(readline) (3)读…

三次握手四次挥手详细解析面试常问

文章目录1.第2次握手传回了ACK,为什么还要传回SYN?2.断开连接-TCP 四次挥手3.为什么要四次挥手?4.为什么不能把服务器发送的 ACK 和 FIN 合并起来,变成三次挥手?5.如果第二次挥手时服务器的 ACK 没有送达客户端&#x…

51-52 - 进程状态设计

---- 整理自狄泰软件唐佐林老师课程 文章目录1. 问题2. 进程状态设计2.1 任务生命周期2.2 任务的状态2.3 任务的生命周期与状态切换2.4 状态切换概要设计2.4.1 核心数据结构>内核队列2.4.2 KillTask() 实现思路2.4.3 整体实现规划2.4.4 编程实验:任务生命周期状态…

Axios二次封装和Api的解耦

目录 一、axios三种基本写法 二、axios的二次封装 三、Api的解耦 一、axios三种基本写法 1)get方法(是最简单的): 写法二: 2)post: 3)axios请求配置 默认是get请求,如…

蓝海创意云vLive虚拟直播亮相2023昆山元宇宙产品展览会

2月15日-19日,由中国计算机行业协会“元宇宙创见未来”2023元宇宙产品展览会在江苏昆山隆重召开,共吸引了省内外32家企业参展,展出近百款元宇宙产品或技术,涵盖芯片、显示、VR、AR等硬件设备,以及工业、文旅、娱乐、教…

IDEA性能优化设置(解决卡顿问题)修改内存

在我们日常使用IDEA进行开发时,可能会遇到许多卡顿的瞬间,明明我们的机器配置也不低啊?为什么就会一直卡顿呢? 原来这是因为IDEA软件在我们安装的时候就设置了默认的内存使用上限(通常很小),这就…

火山引擎数智平台 ByteHouse 入围稀土掘金《Top10 年度创新产品》

更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 近日,国内开发者技术社区稀土掘金发布「2022 稀土掘金引力榜」,旨在盘点 2022 年在数字化转型领域内最具影响力、创新力及潜质的个人、企业、…

ASP.NET MVC | 简介

目录 前提 1.教程 2.MVC 编程模式 最后 前提 在学习学过很多课程,但是最主要学的还是ASP.NET MVC这门课程,工作也是用的ASP.NET MVC,所以写一点ASP.NET MVC的东西,大家可以来看看,我自己不会的时候也不用找别的地方…

「TCG 规范解读」第8章 TPM工作组 TPM 1.2中 SHA1的使用

可信计算组织(Ttrusted Computing Group,TCG)是一个非盈利的工业标准组织,它的宗旨是加强在相异计算机平台上的计算环境的安全性。TCG于2003年春成立,并采纳了由可信计算平台联盟(the Trusted Computing Platform Alli…

如何使用 ChatGPT 编写 SQL JOIN 查询

通过清晰的示例和解释,本文展示了 ChatGPT 如何简化和简化创建复杂 MySQL 查询的过程,使用户更容易与数据库交互并检索他们需要的数据。无论您是初学者还是经验丰富的开发人员,本文都提供了有关如何利用 ChatGPT 来增强您的 MySQL 查询编写技…

微信公众号抽奖怎么做_分享微信抽奖小程序制作的好处

在H5游戏中,抽奖是最受消费者喜爱的模式之一。将H5微信抽奖活动结合到营销中,可以带来意想不到的效果,带流量和曝光率,所以许多企业也会在做活动时添加上不同类型的H5微信抽奖活动。编辑那么,新手怎么搭建微信抽奖活动…

钓鱼网站+persistence植入后门程序+创建用户

本实验实现1: 利用MS14-064漏洞,会生成一个网址,诱导用户点击,打开后,会直接连接到发起攻击的主机上,即可攻击成功。 本实验实现2: 一旦入侵成功,则拿到控制目标主机的部分权限&…

【论文阅读】SSR-Net: 一个小型的 软分段回归网络 用于年龄估计

原始题目SSR-Net: A Compact Soft Stagewise Regression Network for Age Estimation中文名称SSR-Net: 一个小型的 软分段回归网络 用于年龄估计发表时间2018年7月13日平台IJCAI-18来源台湾中央研究院、国立台湾大学文章链接https://www.ijcai.org/proceedings/2018/0150.pdf开…

2023-02-20干活小计:

所以我今天的活开始了: In this paper, the authors target the problem of Multimodal Name Entity Recognition(MNER) as an improvement on NER(text only) The paper proposes a multimodal fusion based on a heterogeneous graph of texts and images to mak…

Renegade:基于MPC+Bulletproofs构建的anonymous DEX

1. 引言 白皮书见: Renegade Whitepaper: Protocol Specification, v0.6 开源代码见: https://github.com/renegade-fi/renegade(Renegade p2p网络每个节点的核心网络和密码逻辑)https://github.com/renegade-fi/mpc-bulletpr…

OpenShift 4 - 将 VMware 虚机迁移至 OpenShift Virtualization(视频)- 温迁移

《OpenShift / RHEL / DevSecOps 汇总目录》 说明:本文已经在支持 OpenShift 4.12 的 OpenShift 环境中验证 文章目录了解 Warm Migration为 VMware VM 配置 CBT用 Warm Migration 方式迁移 VMware VM创建 Migration plan执行 Migration plan演示视频了解 Warm Migr…

漫画 | Python是一门烂语言?

这个电脑的主人是个程序员,他相继学习了C、Java、Python、Go, 但是似乎总是停留在Hello World的水平。 每天晚上,夜深人静的时候,这些Hello World程序都会热火朝天地聊天但是,这一天发生了可怕的事情随着各个Hello wor…

小程序(十)签到业务流程分析

文章目录一、如何获取地理信息?二、如何判定某地区新冠疫情的风险等级?系统的人脸签到模块包含的功能非常丰富,不仅仅只有人脸识别的签到功能,而且还可以根据用户签到时候的地理定位,计算出该地区是 新冠疫情 的 高风险…