Vue中mixins的使用
文章目录
- mixins介绍
- mixins特点
mixins介绍
- Mixins:在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。
- 混入 (mixins):是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
定义公共的mixins文件:
<template></template><script>export default {name: 'mixins-test-main',components: {},props: {},data () {return {mixinData: 'mixin中的变量'}},methods: {mixinFunction () {return '我是mixins里面的公共方法'},},mounted () {},computed: {}}
</script><style scoped>
</style>
在你页面内调用:需要import这个mixins文件 ,然后通过mixins:[‘文件名’]来使用就可以了
<template><div><div @click="handleMixin">调用mixin方法</div></div>
</template><script>import MixinItem from './mixin'export default {name: 'mixin-test-comp',props: {},mixins: [MixinItem],components: {},data () {return {}},methods: {handleMixin () {console.log('mixin-data=========', this.mixinData)let mixfun = this.mixinFunction()console.log('mixin-fun====>>>', mixfun)},},mounted () {},computed: {}}
</script><style scoped>
</style>
mixins特点
1、方法和参数在各组件中不共享
如混入对象中有一个 cont:1的变量,在组件A中改变cont值为5,这时候在组件B中获取这个值,拿到的还是1,还是混入对象里的初始值,数据不共享
2、值为对象的选项
如methods,components等,选项会被合并,键冲突的组件会覆盖混入对象的,比如混入对象里有个方法A,组件里也有方法A,这时候在组件里调用的话,执行的是组件里的A方法
3、值为函数的选项
如created,mounted等,就会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用,同一个钩子函数里,会先执行混入对象的东西,再执行本组件的
4、与vuex的区别
vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。
5、与公共组件的区别
组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。
相关文章:
Vue中mixins的使用
文章目录mixins介绍mixins特点mixins介绍 Mixins:在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。混入 (mixins):是一种分发 Vue 组件中可复用功能的非常灵活的方式…...
【PyQt】PyQt学习(一)框架介绍+环境搭建
简介 写在最前面的话 在决定学习、使用一个框架之前需要考量如下几点: 框架运行效果;框架应用范围;框架学习成本和迁移成本;实现自己所需功能的开发效率; 只有综合考量如上四个方面,才能更好地选择适合…...
浅谈前端设计模式:策略模式和状态模式的异同点
一、策略模式 策略模式是定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换。 而且策略模式是重构小能力,特别适合拆分“胖逻辑”。 这个定义乍一看会有点懵,不过通过下面的例子就能慢慢理解它的意思。 先来看一个真实场景 某次活动要做…...
线性杂双功能PEG试剂OPSS-PEG-Acid,OPSS-PEG-COOH,巯基吡啶聚乙二醇羧基
英文名称:OPSS-PEG-COOH,OPSS-PEG-Acid 中文名称:巯基吡啶-聚乙二醇-羧基 OPSS-PEG-COOH是一种具有OPSS和羧基的线性杂双功能PEG试剂。它是一种有用的带有PEG间隔基的交联剂。OPSS代表正吡啶基二硫化物或邻吡啶基二硫代,与硫醇、…...
开发微服务电商项目演示(四)
一,网关服务限流熔断降级第1步:启动sentinel-dashboard控制台和Nacos注册中心服务第2步:在网关服务中引入sentinel依赖<!-- sentinel --> <dependency><groupId>com.alibaba.cloud</groupId><artifactId>sprin…...
【C语言学习笔记】:静态库
一、什么是库 库是写好的现有的,成熟的,可以复用的代码。现实中每个程序都要依赖很多基础的底层库,不可能每个人的代码都从零开始,因此库的存在意义非同寻常。 本质上来说库是一种可执行代码的二进制形式,可以被操作…...
社科院与杜兰大学中外合作办学金融管理硕士——30+的年龄在职读研有必要吗?
说起读研,年龄在什么区间最合适呢?上次有位咨询的同学反馈年龄已经快35岁了,有一份不错的工作,但又不甘心止步于此,想要通过提升学历升职加薪,但又纠结自己是否能静下心来学习、是否能顺利毕业、拿到的证书…...
2.13作业【设备树解析,按自己理解】
设备树定义 设备树(device tree是描述硬件信息的一种树形结构,设备书文件在linux内核启动后被内核解析。描述一个硬件设备信息的节点我们叫做设备节点,一个设备节点内部包含当前硬件的多个不同属性,相同节点不同属性是以链式结构存…...
《NFL星计划》:巴尔的摩乌鸦·橄榄1号位
巴尔的摩乌鸦(英语:Baltimore Ravens)是一支职业美式橄榄球球队位于马里兰州的巴尔的摩。他们现时为美国美式橄榄球联合会的北区进行比赛,其主场为M&T银行体育场。乌鸦队曾在2000年和2012年取得超级碗冠军。 巴尔的摩乌鸦 成…...
Allegro如何设置自动保存和自动保存的时间操作指导
Allegro如何设置自动保存和自动保存的时间操作指导 做PCB设计的时候,自动保存软件是一个必要的功能,Allegro同样支持设置自动保存,而且可以设置自动保存的时间。 如下图 具体操作如下 点击Setup点击User Preferences...
Kotlin实现简单音乐播放器
关于音乐播放器,我真的是接触比较多,听歌作为我第一大爱好,之前也用Java设计过音乐播放器,感兴趣的同学可以阅读:Android Studio如何实现音乐播放器(简单易上手)和 Android Studio实现音乐播放器…...
ShardingSphere-Proxy 数据库协议交互解读
数据库协议对于大部分开发者来说算是比较冷门的知识,一般的用户、开发者都是通过现成的数据库客户端、驱动使用数据库,不会直接操作数据库协议。不过,对数据库协议的特点与流程有一些基本的了解,有助于开发者在排查数据库功能、性…...
基于ubuntu20.4的wine的MDK5软件的安装
本文基于ubuntu20.4安装MDK5的keil软件,由于MDK不提供linux版本的安装软件,因此需要利用wine软件来安装MDK5软件,具体流程包括wine软件安装、MDK5安装及MDK5的lic添加等3部分内容。具体流程如下所示: (一)…...
Jmeter之直连数据库框架搭建简介
案例简介 通过直连数据库让程序代替接口访问数据库,如果二者预期结果不一致,就找到了程序的缺陷。 下面通过一个案例分析讲解如何实现:获取某个字段值,放在百度上搜索。 实现方式 1、Jmeter本身不具备直连数据库的功能…...
备战蓝桥杯【高精度乘法和高精度除法】
🌹作者:云小逸 📝个人主页:云小逸的主页 📝Github:云小逸的Github 🤟motto:要敢于一个人默默的面对自己,强大自己才是核心。不要等到什么都没有了,才下定决心去做。种一颗树,最好的时间是十年前…...
火眼审阅 | 基于NLP和OCR识别技术赋能合同审阅
合同作为确定权利义务的法律文件,贯穿企业内外部活动的所有环节,可见合同数据之于企业是非常重要的数据资产。 合同管理是企业营业中的重要部分,其中合同审核是企业法务的基本工作之一。而对于所有的法务人员一直存在一个问题:合…...
关于在集合中对象比较属性值的问题
关于在集合中对象比较属性值的问题1 问题说明2 问题排查3 总结及伪代码楼主在最近遇到一个场景,项目中有一个校验。 需要将数据库查询的集合对象与前端传递的集合对象进行比较,看数据是否被修改。 1 问题说明 基于上面项目需求,项目为较老的…...
java微信小程序旅游管理系统
本旅游服务软件,主要实现了管理员后端:首页、个人中心、旅游攻略管理、旅游资讯管理、景点信息管理、门票预定管理、用户管理、酒店信息管理、酒店预定管理、推荐路线管理、论坛管理、系统管理,用户前端:首页、景点信息、酒店信息、论坛中心、我的等。总…...
2023年要跟踪的11个销售管理关键指标
销售管理关键指标有:营销合格线索数量(MQL)、MQL 到 SQL 的转换率、商机赢单率、获客成本、总销售额、客户终身价值(LTV)、LTV 与 CAC 比率、赢单周期、每客户平均销售额(平均客单价)、每销售人…...
MongoDB--》基本常用命令使用
目录 数据库操作命令 选择和创建数据库 数据库的删除 集合操作命令 集合的显示创建 集合的隐式创建 集合的删除 文档基本的CRUD(增删改查) 文档的插入 文档的基本查询 文档的更新 删除文档 数据库操作命令 数据库常用的操作命令如下&#x…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
HTML前端开发:JavaScript 获取元素方法详解
作为前端开发者,高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法,分为两大系列: 一、getElementBy... 系列 传统方法,直接通过 DOM 接口访问,返回动态集合(元素变化会实时更新)。…...
人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型
在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重,适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解,并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...
智能职业发展系统:AI驱动的职业规划平台技术解析
智能职业发展系统:AI驱动的职业规划平台技术解析 引言:数字时代的职业革命 在当今瞬息万变的就业市场中,传统的职业规划方法已无法满足个人和企业的需求。据统计,全球每年有超过2亿人面临职业转型困境,而企业也因此遭…...
一些实用的chrome扩展0x01
简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序,无论是测试应用程序、搜寻漏洞还是收集情报,它们都能提升工作流程。 FoxyProxy 代理管理工具,此扩展简化了使用代理(如 Burp…...
echarts使用graphic强行给图增加一个边框(边框根据自己的图形大小设置)- 适用于无法使用dom的样式
pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图,如果边框加在dom上面,pdf-lib导出svg的时候并不会导出边框,所以只能在echarts图上面加边框 grid的边框是在图里…...
