位置: IT常识 - 正文

【Vue】Vue中mixins的使用方法及实际项目应用详解(vue.mixin是什么)

编辑:rootadmin
【Vue】Vue中mixins的使用方法及实际项目应用详解 文章目录(1)mixin基础(2)mixin特点1.选项合并2.方法和参数在各组件中不共享(3)mixin与vuex的区别(4)mixin与公共组件的区别(5)项目实践(6)总结(1)mixin基础

推荐整理分享【Vue】Vue中mixins的使用方法及实际项目应用详解(vue.mixin是什么),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue里面mixins,vue里面mixins,vue.mixin的使用场景和原理,vue mixs,vue中的mixins,vuejs mixins,vue中的mixin,vue mixs,内容如对您有帮助,希望把文章链接给更多的朋友!

官网解释(Vue2.x):

混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

如何理解mixins?我们可以将mixins理解成一个数组,数组中有单或多个mixin,mixin的本质就是一个JS对象,它可以有data、created、methods等等vue实例中拥有的所有属性,甚至可以在mixins中再次嵌套mixins。

(2)mixin特点1.选项合并

官网解释(Vue2.x)

当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行‘合并’。 比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学习mixins的简单使用</title> <script type="text/javascript" src="../js/vue.js"></script></head><body> <div class="my-app">{{message}}</div> <script type="text/javascript"> const myMixin = { data() { return { message: 'this is mixin message' } }, created() { console.log('mixin created') } } new Vue({ el: ".my-app", mixins: [myMixin], data() { return { message: '简单的vue' } }, created() { console.log(this.message) } }) </script></body></html>

界面: mixins与Vue instance合并时,会将created等钩子函数合并成数组,mixins的钩子优先调用,当data、methods对象健值冲突时,以组件优先。

同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。

值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

2.方法和参数在各组件中不共享【Vue】Vue中mixins的使用方法及实际项目应用详解(vue.mixin是什么)

简述:对于一个混合对象而言,如果在不同的组件中(以组件1和组件2为例)使用数据,如果组件1对mixin中的值改变,不会影响组件2中引用的mixin的data。 例子:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>学习mixins的简单使用(1)</title> <script type="text/javascript" src="../js/vue.js"></script></head><body> <div class="my-app">{{message}}</div> <div class="my-app1">{{message}}</div> <script type="text/javascript"> const myMixin = { data() { return { message: 'this is mixin message', age: '18', } }, created() { console.log('mixin created') } } new Vue({ el: ".my-app", mixins: [myMixin], data() { return { message: '简单的vue' } }, created() { this.age++; console.log('第一次引用mixin——————' + this.age)//19 } }) new Vue({ el: ".my-app1", mixins: [myMixin], data() { return { message: '简单的vue' } }, created() { console.log(this.message) console.log('第二次引用mixin——————' + this.age)//18 } }) </script></body></html>

(3)mixin与vuex的区别

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

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

(4)mixin与公共组件的区别

组件 :在父组件中引入组件,相当于在父组件中给出独立的一片空间来供子组件使用,父子组件中根据props和$emit来互相传值,实际上两者是相互独立的

mixins:在引入组件之后与组件中的对象与方法进行合并,相当于扩展了父组件中的对象和方法,形成了一个新的组件。

(5)项目实践

在vue项目中使用element-ui时,比如在使用Table表格的时候,免不了申明tableData、total、pageSize等一些Table表格、Pagination分页需要的参数。

可以将重复的data和methods写入一个tableMixin中。

export default { data() { return { total: 0, pageNo: 1, pageSize: 10, tableData: [], loading: false } }, created() { this.searchData() }, methods: { // 预申明,防止报错 searchData() {}, handleSizeChange(size) { this.pageSize = size this.searchData() }, handleCurrentChange(page) { this.pageNo = page this.searchData() }, handleSearchData() { this.pageNo = 1 this.searchData() } }}

当需要的时候直接引入即可

import tableMixin from './tableMixin'export default { ...//引入mixins mixins: [tableMixin], methods: { searchData() { ... } }}

我们在组件内会重新申明serchData方法,类似这种methods对象形式的key,如果key相同,组件内的key会覆盖tableMixin中的key。 当然我们还可以在mixins嵌套mixins。

(6)总结

注意一下 vue 中 mixins 的优先级,component > mixins > extends。

我们暂且将 mixins 称作是组件模块化,灵活运用组件模块化,可以将组件内的重复代码提取出来,实现代码复用,也使我们的代码更加清晰,效率也大大提高。

本文链接地址:https://www.jiuchutong.com/zhishi/300881.html 转载请保留说明!

上一篇:ChatGPT助力校招----面试问题分享(四)

下一篇:Win11磁盘分区后怎么恢复到分区前?Win11磁盘分区后在恢复的方法(win11磁盘分区后不显示)

  • 怎样运营好一个公司的官方微博?(怎样运营好一个店铺)

    怎样运营好一个公司的官方微博?(怎样运营好一个店铺)

  • 苹果手机siri怎么设置自己的声音(苹果手机siri怎么读语音)

    苹果手机siri怎么设置自己的声音(苹果手机siri怎么读语音)

  • 苹果X手机内存满了手机用不了怎么办(苹果x内存满了怎么清理)

    苹果X手机内存满了手机用不了怎么办(苹果x内存满了怎么清理)

  • 华为应用助手拉不出来(华为应用助手怎么拉出来)

    华为应用助手拉不出来(华为应用助手怎么拉出来)

  • 苹果控制中心怎么添加屏幕录制(苹果控制中心怎么设置)

    苹果控制中心怎么添加屏幕录制(苹果控制中心怎么设置)

  • 小米mix2s怎么设置快充(小米mix2怎么设置来电铃声)

    小米mix2s怎么设置快充(小米mix2怎么设置来电铃声)

  • qq密码输错几次会锁住(qq密码输错几次会锁死)

    qq密码输错几次会锁住(qq密码输错几次会锁死)

  • 10代cpu什么时候出(10代cpu什么时候下架)

    10代cpu什么时候出(10代cpu什么时候下架)

  • 应用程序正常初始化0xc0000142(应用程序正常初始化失败怎么解决)

    应用程序正常初始化0xc0000142(应用程序正常初始化失败怎么解决)

  • 别人抖音视频为什么不能下载(别人抖音视频为什么保存不了)

    别人抖音视频为什么不能下载(别人抖音视频为什么保存不了)

  • 表格怎么切换下一行输入(表格怎么切换下一个表格)

    表格怎么切换下一行输入(表格怎么切换下一个表格)

  • 微信指纹解锁哪里设置(微信指纹解锁哪里设置华为)

    微信指纹解锁哪里设置(微信指纹解锁哪里设置华为)

  • 苹果微信怎么下载不了(苹果微信怎么下载微信分身)

    苹果微信怎么下载不了(苹果微信怎么下载微信分身)

  • 手机莫名其妙重启是怎么回事(手机莫名其妙重启电量还变少了)

    手机莫名其妙重启是怎么回事(手机莫名其妙重启电量还变少了)

  • qq相册内存有多大(qq相册有多大存储量)

    qq相册内存有多大(qq相册有多大存储量)

  • 华为畅享10plus有语音唤醒功能吗(华为畅享10plus有OTG功能吗)

    华为畅享10plus有语音唤醒功能吗(华为畅享10plus有OTG功能吗)

  • ps背景图层怎么解锁(ps背景图层怎么变成透明)

    ps背景图层怎么解锁(ps背景图层怎么变成透明)

  • 苹果开热点限制人数(苹果手机开热点限制)

    苹果开热点限制人数(苹果手机开热点限制)

  • iphonexs广角镜头怎么用(iphonexs相机广角镜头怎么用)

    iphonexs广角镜头怎么用(iphonexs相机广角镜头怎么用)

  • ios捷径怎么用(ios捷径介绍)

    ios捷径怎么用(ios捷径介绍)

  • 正压呼吸器使用方法(正压呼吸器使用培训)

    正压呼吸器使用方法(正压呼吸器使用培训)

  • YOLOV8最强操作教程.(yolov5 教程)

    YOLOV8最强操作教程.(yolov5 教程)

  • 小狐狸ChatGPT付费创作系统1.6.8独立开源版 + 公众号H5+小程序+VUE源码安装配置详细教程(小狐狸吧)

    小狐狸ChatGPT付费创作系统1.6.8独立开源版 + 公众号H5+小程序+VUE源码安装配置详细教程(小狐狸吧)

  • 财务记录软件
  • 积分抵现是什么意思
  • 个体户转一般纳税人怎么做账
  • 发票的抵扣期限怎么填
  • 从一个公司到另一个公司公积金
  • 新成立的企业都有哪些
  • 清算期间,公司是否可以经营
  • 核算会计科目职工薪酬的范围
  • 增值税返还需要交增值税吗
  • 非利息净收入包括营业外收入吗
  • 外购一批原材料对外销售
  • 总公司要合并分公司报表吗
  • 办公用品增值税专用发票税点
  • 农副产品收购发票申请
  • 一般贸易免抵退税计算
  • 增值税需要计提吗
  • 计提坏账准备和发生坏账准备分录
  • 返还工资保证金的书面申请
  • 2020年餐饮行业免税政策
  • 个体户能给自己交五险吗
  • 公司在银行购买金币没有发票
  • 电脑开机黑屏没信号怎么回事
  • 企业之间的违约金进什么科目
  • 有限公司股权怎么划分
  • 销售部门品种多怎么说
  • 电脑台式机显卡怎么拆
  • bboy.exe进程是病毒吗 bboy进程安全吗
  • 贸易公司如何办理产地证
  • 车辆购置税税收缴款书
  • php判断useragent
  • 2020注册谷歌账号方法
  • 超像素和markpage的区别
  • 一分钟玩转钉钉文档是什么东西
  • 网页设置怎么在css中设置
  • 数据模型 excel
  • php用户登录界面代码
  • Laravel5.1自定义500错误页面示例
  • 房租的计算方式
  • 管家婆软件如何做账
  • 预缴2%
  • 处置结余的工程款怎么算
  • 发票作废发票怎么处理
  • 城市维护建设税属于什么会计科目
  • 补充医疗保险会查hiv吗
  • python类的继承与多态
  • sql2008安装出现以下错误
  • mongodb win7
  • 中国移动发票抬头开错了可以重开吗
  • 个人所得税税率怎么算
  • 大数据sql教程
  • 教育行业税收优势分析
  • 运输公司内账会计每天需要做什么
  • t3怎么查资产负债表
  • 消费税如何计量
  • 固定资产残值怎么做账务处理
  • 财政拨款公司的资金来源
  • 出售资产时递延所得税转回是全部收入吗
  • 公司与公司之间人与人之间最大的区别
  • 验资户和基本户账号一致么
  • 结转主营业务成本是什么意思
  • 银企对账如何操作
  • 企业差旅费的报销流程
  • 新收入准则要求
  • mysql中排序
  • winxp启动
  • u启动怎么装机
  • wsinspector.exe是什么进程
  • linux系统如何禁用光驱
  • javascript的用法
  • 电脑自动重启命令
  • python中get怎么用
  • 运行node.js的应用程序服务器
  • 设置拉我进群必须经过我同意
  • Unity3D AsssetBundle加载效率比较
  • jquery实现二级联动菜单
  • python 批量操作
  • 原生javascript
  • jQuery基本选择器总结
  • 季度企业所得税分录
  • 湖南地税电话号码
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设