vue2_mix混入的用法

article/2023/12/3 1:39:21

文章目录

    • 背景
    • minx混入
    • 使用
      • 1.定义了一个mix.js
      • 2. 定义一个组件混入mix
      • mix的同享组件作用域this相同
        • 使用场景
      • 结尾

背景

多个vue文件出现大量重复的函数和生命周期处理时使用mix混入

minx混入

当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
vue2官网案例

// 定义一个混入对象
var myMixin = {created: function () {this.hello()},methods: {hello: function () {console.log('hello from mixin!')}}
}// 定义一个使用混入对象的组件
var Component = Vue.extend({mixins: [myMixin]
})var component = new Component() // => "hello from mixin!"

查看vue2的mixins来源
options api
在这里插入图片描述

可以混入vueComponent的组件
在这里插入图片描述继承composition api v3版本的(有setup)
在这里插入图片描述
可见mininx混入的类型为一个vue的类型

使用

1.定义了一个mix.js

声明 mixName变量和mixFunc的函数

export default {data () {return {mixName: 'yma16'}},methods: {mixFunc () {console.log('mix的作用域 this', this)this.$message.info('mix的mixFunc方法')}}
}

2. 定义一个组件混入mix

mixins混入定义的mix组件

<template><div class="container"><h1>{{ msg }}</h1><el-divider>mix</el-divider><el-button @click="say">当前组件的say方法</el-button><el-divider>mix</el-divider><el-button @click="mixFunc">mix的方法</el-button></div>
</template><script>
import mix from './mix'
export default {name: 'StudyMix',mixins: [mix],data () {return {msg: 'mix 混入'}},methods: {say () {console.log('当前组件的作用域 this', this)this.$message.info('组件的say方法')}}
}
</script>

mix的同享组件作用域this相同

对比组件和混入的this
在这里插入图片描述

验证node的tag一样
在这里插入图片描述

this打印的值相同

使用场景

举个我工作中实际应用到的场景

  1. 表格是使用比较多的,可以提取表格的打印和获取选中行的方法到mix
  2. 文件下载的方法封装到一个mix去调用

注意点:mix中调用的变量要确保在组件中存在,使用不熟练很容易出现undefined命名冲突的错误

结尾

感谢阅读,如有问题,欢迎指正!
在这里插入图片描述


http://www.ngui.cc/article/show-1007598.html

相关文章

正则表达式学习,及部分样例

对于正则表达式,相信很多人都知道,但是很多人的第一感觉就是难学, 因为看第一眼时,觉得完全没有规律可寻,而且全是一堆各种各样的特殊 符号,完全不知所云。 其实只是对正则不了解而以,了解了你就会发现,原来就这样啊正则所用 的相关字符其实不多, 也不难记,更不难懂,…

Mysql快速上手一(基础知识、数据模型、数据类型、SQL语句)

文章目录MySQL基础知识基本概念本地mysql服务启动与停止客户端连接mysql数据模型关系型数据库数据模型数据类型SQL语句DDL表操作库操作DMLDQLDCL参考资料作为笔记&#xff0c;后面会持续更新该方面MySQL基础知识 基本概念 本地mysql服务启动与停止 这里的mysq对应的是window…

Dubbo--笔记1

Dubbo–笔记1 该笔记为看尚桂谷的视频简单记下的笔记&#xff1a; RPC: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Ly611RY-1679724725006)(null)] 上面图中可以看出 影响RPC的因素主要有两个&#xff1a; 建立socket连接(也就是通讯效率)序…

简单linux 下 x64任意地址的inlinehook

背景最近工作需要hook函数&#xff0c;然后实现自己的逻辑&#xff0c;之前都是使用的frida来直接hook&#xff0c;但是这里发现&#xff0c;挂在frida之后对性能影响较大&#xff0c;可能是数十倍的影响&#xff0c;之前一直都没发现。所以这里必须自己实现一个hook参考这里参…

谈谈计算机的本质

依托于我现在浅显的认知&#xff0c;我觉得计算机其实就是在处理两大问题&#xff1a;输入输出&#xff08;IO&#xff09;和计算。 输入输出&#xff08;IO&#xff09;包括硬件的IO以及网络IO。 计算包括各种算法甚至是现在大火的人工智能。 操作系统是一个超大的基础软件…

@Transactional和synchronized同时使用时的一些问题以及解决

Transactional和synchronized同时使用并不能保证事务一致性背景任何事情都有一个发生背景有个需求【一个业务里面包含多个事务,而且还需要避免其他线程的影响,所幸的是该服务只需要启动单实例,不然还要考虑分布式的影响】我的思路就是用Transactional 和 synchronized来保证事务…

记一次前端cookie冲突,导致同一个浏览器其他系统被踢下线问题分享

背景: 首先我在是公司的一个职能部门&#xff0c;所做的软件主要是服务于公司内部员工使用&#xff0c;员工可以通过工号来进行登录&#xff0c;也可以通过其他方式登录&#xff0c;所以整个公司提供了一个统一身份管理平台来员工身份认证、权限进行集中式的管理&#xff0c;实…

三、Trino406系列 之 客户端

文章目录前言客户端命令行要求条件客户端安装Running the CLITLS/HTTPSJDBC驱动需求条件安装Registering and configuring the driverConnectingConnection parametersParameter reference前言 https://trino.io/docs/current/client/cli.html 客户端是向trino server提交sql查…

华为OD机试题【字符匹配】用 Java 解 | 含解题说明

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南华为od机试,独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典本篇题目:字符匹配 题目 给你一个字符串…

Golang流媒体实战之一:体验开源项目lal

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 关于《Golang流媒体实战》 因为工作需要&#xff0c;开始了流媒体开发学习&#xff0c;于是打算选择一个Go版本的开源流媒体服务器作为学习方向lal是个不错的…