vue-mixin
1.vue中,混入(mixin)是一种特殊的使用方式。一个混入对象可以包含任意的组件配置选项(data, props, components, watch,computed…)可以根据需求"封装"一些可复用的单元,并在使用时根据一定的策略合并到组件的选项中,使用时和组件自身的选项没有区别.
2.mixin中比较重要的两个方法: Vue.extend() 和 extend()
3.Vue.extend(): 是基础的Vue构造器,参数是一个包含组件选项的对象(组件选项包括data, props, computed, methods等等), 可以显示的扩展组件和混入对象
4.全局混入将对所有的Vue实例均有效,不推荐使用,但是在编写一些Vue插件的时候会用到,例如Vuex的源码中就使用了全局的mixin全局混入$store对象
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
</head>
<body><div id="root"><child></child></div>
</body>
<script>// 定义一个混入对象
var myMixin = {created: function () {this.hello()},methods: {hello: function () {console.log('hello from mixin!')}}
}// 定义一个使用混入对象的组件
var child = Vue.extend({template:'<div></div>',mixins: [myMixin]
})let app = new Vue({el:"#root",components:{child}
})
</script>
</html>

4.extend(): 是对象的合并方法,参数是合并的源对象和目标对象,用于对象的合并,用法为: extend(target, source)表示source对象将合并到target对象上,作用类似Object.assign()方法
(当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。)
案例
<script>// 定义一个混入对象var myMixin = {data: function () {return {message: 'hello',foo: 'abc'}}
}// 定义一个使用混入对象的组件
new Vue({el:'#root',mixins: [myMixin],data: function () {return {message: 'goodbye',bar: 'def'}},created: function () {console.log(this.$data)// => { message: "goodbye", foo: "abc", bar: "def" }}
})
</script>
(同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。)
相关文章:
vue-mixin
1.vue中,混入(mixin)是一种特殊的使用方式。一个混入对象可以包含任意的组件配置选项(data, props, components, watch,computed…)可以根据需求"封装"一些可复用的单元,并在使用时根据一定的策略合并到组件的选项中,使用时和组件自…...
力扣刷题 day43:10-13
1.完全平方数 给你一个整数 n ,返回 和为 n 的完全平方数的最少数量 。 完全平方数 是一个整数,其值等于另一个整数的平方;换句话说,其值等于一个整数自乘的积。例如,1、4、9 和 16 都是完全平方数,而 3 …...
3、在docker 容器中安装tomcat
1、在服务器上查找tomcat镜像,查看前5条 docker search tomcat --limit 5 2、拉取镜像到本地 拉取官方的tomcat到本地 docker pull tomcat:9.0.34-jdk8 3、查看本地镜像 docker images |grep tomcat 4、启动tomcat 服务 使用默认配置 docker ru…...
工业互联网系列1 - 智能制造中有哪些数据在传输
工业互联网以网络为基础,需要传输的数据种类多种多样,这些数据对于实时监控、生产优化、设备维护和决策支持等方面都至关重要。 以下是一些常见智能制造业中需要传输的数据类型: 传感器数据:制造设备上安装的传感器(如…...
centos7部署Nginx和RabbitMQ
文章目录 Nginx安装部署【简单】简介安装 RabbitMQ安装部署【简单】简介安装 Nginx安装部署【简单】 简介 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx可以托管用户编写的WEB应用程序成为可访问的网页服务&am…...
Nacos集群搭建
Nacos集群搭建 1.集群结构图 Nacos集群图: 其中包含3个nacos节点,然后一个负载均衡器代理3个Nacos。这里负载均衡器可以使用nginx。 三个nacos节点的地址: 节点ipportnacos1192.168.150.18845nacos2192.168.150.18846nacos3192.168.150…...
运维小工具分享
1.windwos时间同步工具 通过NetTime软件同步 通过一个免费的同步时间软件来进行对时操作 软件官网链接:http://timesynctool.com/ 修改Windows主机时间,修改时间,时间差为10年、3年、4月份、24小时、2小时、1分钟;都可以及时与“…...
Eclipse插件安装版本不兼容问题解决方案——Papyrus插件为例
项目场景: Eclipse Papyrus安装后,没有新建Papyrus工程选项,也没有新建Papyrus Model的选项。 打开Papyrus Model会报错 问题描述 同样的,安装其他插件也是。可能某个插件之前安装是好用的,结果Eclipse的版本更新了,就再也安装不好用了 原因分析: 根本原因是因为包之…...
【Qt之QTimer】使用及技巧
简介 QTimer是Qt中的定时器类,用于执行定时操作,如在一段时间间隔后触发某个槽函数或执行特定的代码。它提供了灵活的定时功能,可以用于处理各种时间相关的任务。它是基于Qt的事件循环机制工作的。 主要函数说明 构造函数: QTim…...
零基础快速自学SQL,2天足矣。
此文是《10周入门数据分析》系列的第6篇。 想了解学习路线,可以先行阅读“ 学习计划 | 10周入门数据分析 ” 上一篇分享了数据库的基础知识,以及如何安装数据库,今天这篇分享数据库操作和SQL。 SQL全称是 Structured Query Language&#x…...
Meta开源数字水印Stable Signature,极大增强生成式AI安全
全球社交、科技巨头Meta(Facebook、Instagram等母公司)在官网宣布,开源数字水印产品Stable Signature,并公开论文。 据悉,Stable Signature是由Meta和INRIA(法国国家信息与自动化研究所)联合开…...
python实现分词器
在Python中实现分词有很多方法,具体取决于你的应用场景和数据。下面我会介绍一种常用的分词库——jieba。如果你的数据是英文,你也可以使用nltk库。 中文分词 使用jieba进行中文分词: 首先,你需要安装jieba库。如果还未安装&am…...
第五十二章 学习常用技能 - Global 映射
文章目录 第五十二章 学习常用技能定义数据库定义命名空间Global映射 第五十二章 学习常用技能 定义数据库 创建本地数据库: 登录管理门户。选择系统管理 > 配置 > 系统配置 > 本地数据库。选择创建新数据库以打开数据库向导。输入新数据库的以下信息&a…...
vue实现瀑布流
1、在 src 目录下创建 component文件夹,在文件夹中创建 vue文件。 2、在 Vue文件中写入以下内容 <div class"pubu"><div class"left"><div class"pubu-item" v-for"item in left" :key"item.id"…...
【虹科干货】Redis Enterprise 自动分层技术:大数据集高性能解决方案
越来越多的应用程序依赖于庞大的数据集合,而这些应用程序必须快速响应。借助自动分层,Redis Enterprise 7.2 帮助开发人员轻松创建超快的应用程序。何乐而不为? Redis将数据存储在内存中,因此应用程序能以最快的速度检索和处理数…...
代码随想录训练营二刷第五十四天 | 300.最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组
代码随想录训练营二刷第五十四天 | 300.最长递增子序列 674. 最长连续递增序列 718. 最长重复子数组 一、300.最长递增子序列 题目链接:https://leetcode.cn/problems/longest-increasing-subsequence/ 思路:定义dp[i]表示从0到i的闭区间的最长子序列长…...
LeetCode 2562. 找出数组的串联值【数组,相向双指针】1259
本文属于「征服LeetCode」系列文章之一,这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁,本系列将至少持续到刷完所有无锁题之日为止;由于LeetCode还在不断地创建新题,本系列的终止日期可能是永远。在这一系列刷题文章…...
SpringBoot使用的时间与空间计量单位
SpringBoot支持JDK8提供的时间与空间计量单位 //时间单位DurationUnit(ChronoUnit.MINUTES)private Duration serverTimeOut;//存储空间单位DataSizeUnit(DataUnit.MEGABYTES)private DataSize dataSize; 在springboot中的具体使用: Component Data ConfigurationPr…...
【使用 TensorFlow 2】02/3 使用 Lambda 层创建自定义激活函数
一、说明 TensorFlow 2发布已经接近2年时间,不仅继承了Keras快速上手和易于使用的特性,同时还扩展了原有Keras所不支持的分布式训练的特性。3大设计原则:简化概念,海纳百川,构建生态.这是本系列的第三部分,…...
docker--使用docker login 报错解决方案
我们在本地使用 docker login 命令登录时报错,可以尝试一下先 docker logout 命令退出登录后,在使用 docker login命令进行登录操作; docker logout...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
Bean 作用域有哪些?如何答出技术深度?
导语: Spring 面试绕不开 Bean 的作用域问题,这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开,结合典型面试题及实战场景,帮你厘清重点,打破模板式回答,…...
