对vue的mixin的理解,有什么应用场景?

news2025/1/14 1:14:16

 

mixin是什么

Mixin是面向对象程序设计语言中的类,提供了方法的实现。

其他类可以访问mixin类的方法而不必成为其子类

当一段代码非常相似的时候就可以抽离成一个mixin

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

使用场景

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

mixins和vuex的区别

vuex公共状态管理,在一个组件被引入后,如果该组件改变了vuex里面的数据状态,其他引入vuex数据的组件也会对应修改,所有的vue组件应用的都z是同一份vuex数据。(在js中,有点类似于浅拷贝)
vue引入mixins数据,mixins数据或方法,在每一个组件中都是独立的,互不干扰的,都属于vue组件自身。(在js中,有点类似于深度拷贝)

mixins和组件的区别

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

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

mixin的使用

定义一个mixin名字为myMixins

export default {
   data () {
     return {
          num:1
      }
   },
   methods: {
      mymixin() {
          console.log(this.num);
      },
   }
}

在组件中使用

import {myMixins} from './myMixins';

export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
  //使用mixin可以直接用,但是组件就得传值
    this.num++
  },

} 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

不是所有国产软件都像360一样流氓!这些良心国产软件不该被埋没

提到国产软件,很多人第一反应——360安全卫士。 但就像那句著名点评:“电脑上的常见问题有一半是安装360可以解决的,另一半是卸载360可以解决的。” 360可以说让人又爱又恨,强大的杀毒能力毋庸置疑,但是捆绑安装也是…

java计算机毕业设计基于安卓Android的学生个人支出管理APP

项目介绍 基于APP的学生个人支出管理系统主要针对广大学生,本设计分为用户客户端和管理员后台管理,前台用户管理使用Android Studio制作,使用了JS、HTML和uniapp开发框架,后台管理使用JAVA:MySQL数据库来保存数据以及上传数据。MySQL体积小、速度快,为数据的存储和…

用Python机器人监听微信群聊, 我看谁这么大的胆子敢调侃老板和前台小姐姐!

随着微信社交的兴起,我们加入的群也越来越多,一个不经意就被拉入好几个群,群是大家协同交流的平台,但是微信群却越来越泛滥,不知道大家有没有统计过自己浪费在毫无营养的群中的时间? 因为群质量太低或者群太…

Web页面测试

一、Web的功能测试 1、超链接测试 a、链接与链接的说明文字要匹配 (注:也可以是图片) b、链接的文字要描述正确 c、链接的文字要精简有效 d、链接的页面应该存在,不应该出现404找不到页面的错误 e、没有孤立页面,只有…

Android kotlin 基础知识codelab Fragment Summary

创建 fragment 在此 Codelab 中&#xff0c;您向 AndroidTrivia 应用添加了一个 fragment&#xff0c;在本课的后续两个 Codelab 中您将继续在此应用中执行操作。 fragment 是 activity 的模块化部分。fragment 有自己的生命周期&#xff0c;会接收自己的输入事件。使用 <…

宝宝经常吐奶,除了拍嗝,这6个细节也不容忽视,别因小失大

众所周知&#xff0c;宝宝吐奶是很常见的。不过&#xff0c;虽然很常见&#xff0c;但只要宝宝吐奶&#xff0c;尤其是宝宝吐奶时&#xff0c;家长们都会非常心疼&#xff0c;迫不及待地想代替宝宝承受这些不适。为什么宝宝这么容易吐奶&#xff1f;首先&#xff0c;宝宝的胃是…

JQuery 基础

JQuery对象和JS对象区别与转换 1. JQuery对象在操作时&#xff0c;更加方便。 2. JQuery对象和js对象方法不通用的. 3. 两者相互转换 * jq -- > js : jq对象[索引] 或者 jq对象.get(索引) * js -- > jq : $(js对象) <script>//1.通过…

定时执行专家 —— 模拟键盘按键、鼠标单击功能发布(可发送快捷键、热键、鼠标左键多次单击)

目录 ◆ 定时执行专家 —— 模拟键盘按键 ◆ 定时执行专家 —— 模拟鼠标单击 ◆ 定时执行专家 —— 模拟键盘按键 - 设置方法 &#xff08;1&#xff09;点击 “定时执行专家” 工具栏 “新建” 图标&#xff0c;打开 “任务对话框”&#xff08;图1&#xff09;&#xff1…

Spring中的Bean的实例化

Bean的实例化1. Bean的配置2.Bean的实例化2.1 构造器实例化2.2 静态工厂方式实例化2.3 实例工厂方式实例化1. Bean的配置 Spring 可以被看作是一个大型工厂&#xff0c;这个工厂的作用就是生产和管理 Spring 容器中的Bean。如果想要在项目中使用这个工厂&#xff0c;就需要开发…

Android开发【全面理解Activity】

一、 Activity的生命周期 和其他手机 平台 的应用 程序 一样&#xff0c;Android的应用程序 的生命周期是被统一掌控 的&#xff0c;也就是说我们写的应用程序命运掌握在别人&#xff08;系统&#xff09;的手里&#xff0c;我们不能改变它&#xff0c;只能学习并适应它。 简…

一年一度的云计算春晚——亚马逊云科技re:Invent

一年一度的云计算春晚——亚马逊云科技re:Invent&#xff0c;近日盛大开幕。那么“云计算春晚”发布了什么AI产品&#xff1f; 首先来看Amazon SageMaker&#xff0c;今年是其发布的第五年&#xff0c;各行各业已有数百万个机器学习模型使用该服务管理&#xff0c;每月进行数千…

支付服务-----功能实现逻辑

支付服务实现逻辑 简单概况一下支付服务的实现逻辑 通过支付宝的沙箱环境来模拟支付功能&#xff0c;用户点击支付宝的链接后给后端发/aliPayOrder请求&#xff0c;封装支付宝需要payVo对象&#xff0c;并且调用 String pay alipayTemplate.pay(payVo)和 return pay&#xf…

A-LEVEL经济例题解析及练习Economic Question

每日一练 例题 Question: Consumer surplusA. Find Marginal Buyer’s WTP (Willingness to Pay) at Q10. B. Find Consumer Surplus for P30. Suppose P falls to $20. How much will Consumer Surplus increase due to: C. buyers entering the market D. existing buyers pa…

mysql8安装过程

1下载地址 https://downloads.mysql.com/archives/community/ 根据自己电脑系统环境选择操作系统和版本&#xff0c;本人选择下载的是windows 64位&#xff0c; 2.创建并编写my.ini文件 创建一个文本文档将文件名改为my后缀为ini my.ini配置其中basedir跟datadir自行根据加…

发布了二十年的《敏捷宣言》是否依然适用?

敏捷宣言已经诞生二十年&#xff0c;这份简短却“颠覆”规则的文件&#xff0c;帮助我们将产品开发交付的方式&#xff0c;从长途运输变成了“次日达”一样的存在。当下的我们正处在一个持续创新的世界&#xff0c;面对技术变革洪流&#xff0c;有时候我们可能会产生思考&#…

day42 文件包含LFIRFI伪协议编码算法代码审计

前言&#xff1a; #知识点&#xff1a; 1、解释-什么是文件包含 2、分类-本地LFI&远程RFI 3、利用-配合上传&日志&会话 4、利用-伪协议&编码&算法等 #核心知识&#xff1a; 1、本地包含LFI&远程包含RFI-区别 一个只能包含本地&#xff0c;一个可…

操作系统例题合集(持续更新)

传送门 由于操作系统知识太多&#xff0c;再加上我总结的比较细&#xff0c;所以一片放不下&#xff0c;拆分成了多篇文章。 操作系统笔记——概述、进程、并发控制 操作系统笔记——储存器管理、文件系统、设备管理 操作系统笔记——Linux系统实例分析、Windows系统实例分析 …

模拟和矢量信号源进阶使用技巧

前言 通常射频信号源的简单应用通常只是输入频率、功率&#xff0c;加上一些模拟、数字调制&#xff0c;然而要充分挖掘出信号源的潜力和性能需要更多的技巧。本应用指南会告诉您可以通过更多的方式提高射频信号源输出信号的质量&#xff0c;具体内容包括&#xff1a; 1. 提高…

【LeetCode_字符串_逻辑分析】6. Z 字形变换

目录考察点第一次&#xff1a;2022年12月9日10:58:17解题思路代码展示题目描述6. Z 字形变换 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 “PAYPALISHIRING” 行数为 3 时&#xff0c;排列如下&#xf…

DAP组件外部服务开发说明

DAP数据分析平台主要是为了满足企业数据分析的需要而开发的一款产品&#xff0c;不同于一般的BI平台&#xff0c;DAP数据分析平台更侧重数据的聚合&#xff0c;平台预置有数据源注册、ODS注册与管理、数仓配置与数据聚合&#xff0c;从而实现企业业务数据的统一&#xff0c;构建…