位置: 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磁盘分区后不显示)

  • vivo虚拟按键怎么调出来(vivo调出虚拟按键)

    vivo虚拟按键怎么调出来(vivo调出虚拟按键)

  • 微信朋友圈可以查看访客记录吗(微信朋友圈可以看到谁浏览过吗)

    微信朋友圈可以查看访客记录吗(微信朋友圈可以看到谁浏览过吗)

  • 荣耀9x息屏显示时间(华为荣耀9x灭屏显示)

    荣耀9x息屏显示时间(华为荣耀9x灭屏显示)

  • 微信不是群主可以@所有人吗(微信不是群主可以发起接龙吗)

    微信不是群主可以@所有人吗(微信不是群主可以发起接龙吗)

  • 抖音看不到自己动态(抖音看不到自己的评论怎么回事?)

    抖音看不到自己动态(抖音看不到自己的评论怎么回事?)

  • 手机分屏可以分3个屏吗(手机分屏可以分声音吗)

    手机分屏可以分3个屏吗(手机分屏可以分声音吗)

  • 淘宝直播平台抽成多少(淘宝直播平台抽多少)

    淘宝直播平台抽成多少(淘宝直播平台抽多少)

  • ps渲染是什么意思(ps渲染效果图)

    ps渲染是什么意思(ps渲染效果图)

  • findx2和findx2pro区别(findx2 pro区别)

    findx2和findx2pro区别(findx2 pro区别)

  • 阿里巴钉钉是什么意思(阿里巴钉钉是什么软件啊)

    阿里巴钉钉是什么意思(阿里巴钉钉是什么软件啊)

  • 爱奇艺小度专享会员是免费的吗(爱奇艺小度专享会员怎么登录)

    爱奇艺小度专享会员是免费的吗(爱奇艺小度专享会员怎么登录)

  • vi形象设计是什么意思(vi设计品牌形象策划)

    vi形象设计是什么意思(vi设计品牌形象策划)

  • 英特尔处理器后面的字母代表什么意思(英特尔处理器后缀p)

    英特尔处理器后面的字母代表什么意思(英特尔处理器后缀p)

  • 联想y7000如何强制重启(联想y7000p强冷模式怎么开)

    联想y7000如何强制重启(联想y7000p强冷模式怎么开)

  • 微信怎么设置收藏悬浮(微信怎么设置收款时间延长)

    微信怎么设置收藏悬浮(微信怎么设置收款时间延长)

  • 苹果黑夜模式怎么设置(苹果黑夜模式怎么变成白天模式)

    苹果黑夜模式怎么设置(苹果黑夜模式怎么变成白天模式)

  • xrxs区别(xr xs 区别)

    xrxs区别(xr xs 区别)

  • iphone11用什么屏幕(iphone11使用什么屏幕)

    iphone11用什么屏幕(iphone11使用什么屏幕)

  • 酷我音乐京东支付怎么取消自动续费(酷我音乐京东支付怎么用)

    酷我音乐京东支付怎么取消自动续费(酷我音乐京东支付怎么用)

  • 快手买衣服怎么退货(快手买衣服怎么查订单)

    快手买衣服怎么退货(快手买衣服怎么查订单)

  • pr怎么统一色调(pr2017统一色调)

    pr怎么统一色调(pr2017统一色调)

  • 1150针cpu型号汇总(1150针的cpu型号表)

    1150针cpu型号汇总(1150针的cpu型号表)

  • 华为手机能扫描吗(华为手机能扫描身份证吗)

    华为手机能扫描吗(华为手机能扫描身份证吗)

  • 内存双通道怎么插(内存双通道怎么设置)

    内存双通道怎么插(内存双通道怎么设置)

  • c语言内联汇编如何理解(c语言内嵌汇编)

    c语言内联汇编如何理解(c语言内嵌汇编)

  • 小规模忘了报税怎么办
  • 结转和分配制造费用会计分录
  • 税款已交更正申报
  • 如何查询对方是不是一般纳税人
  • 物业采购主要做什么
  • 科技公司的成本如何核算
  • 货币的兑换是怎么决定的
  • 公司利润如何提取避税
  • 质量不合格起诉状
  • 预付账款属于什么账户
  • 社保基数超过工资
  • 调增教育经费如何做账
  • 企业自产自销的成本怎么核算?
  • 外聘技术人员合同
  • 地产企业不动产登记入哪个科目?
  • 补缴的公积金可以抵扣个税吗
  • 出口退税进项抵扣了不退税可以吗
  • 捐赠允诺是否有法律约束力?
  • 托儿所幼儿园卫生保健工作规范2022
  • 超市收取的返利的税收处理
  • 增值税普通发票需要交税吗
  • 企业计算缴纳的所得税费用
  • 资产总额和净资本的关系
  • 苹果电脑mac设备在哪里
  • 投资入股的无形资产要摊销吗
  • 免征的增值税怎么做账
  • 房产税的征收范围为
  • php str函数
  • 退休后工作单位填什么内容
  • apache去掉php后缀
  • 现金清查的会计科目
  • 继续涉入资产会计处理
  • 企业研发费用加计扣除是什么意思
  • 应收账款属于会计要素中的什么科目
  • 增值税注明的价款是含税还是不含税
  • 已用短信息服务发送信息,对方能收到吗
  • yolov5官方
  • php怎么变成txt
  • 商品出入库台账
  • 银行同业利率
  • 商业承兑到期后有效期
  • 税务清算后还需要报税吗
  • 增值税品种
  • 研发费用凭证是什么样
  • SqlServer 2005/2008数据库被标记为“可疑”的解决办法
  • 员工工资需要交税吗
  • 车船税和保险在一张发票怎么做账
  • PostgreSQL中关闭死锁进程的方法
  • mysql查询字段为空的数据
  • 待处理财产损益是备抵类科目吗
  • 当月开的票必须开发票吗
  • 进项税额转出的几种情况
  • 押金退还需要多久
  • 本年利润为什么是负数
  • 百旺云票怎么开电子发票
  • 企业的培训费用
  • 应收账款增加说明企业什么
  • sqlserver isnull在数据库查询中的应用
  • 在64位的Ubuntu系统上安装32位的WPS的方法
  • centos备份文件夹
  • gwservice进程
  • linux回退
  • 关于windows的说法正确的是
  • linux 使用
  • css怎么画
  • perl uc,lc,ucfirst,lcfirst大小写转换函数
  • cocos2dx小游戏
  • 用jQuery实现优酷首页轮播图
  • 输出语句的执行过程
  • python内置函数用来返回列表,元组,字典
  • 批处理文件实例
  • jquery.css
  • linux 查找后缀名文件
  • node.js的安装步骤
  • js判断符
  • jquery实现点击按钮
  • js拖拽排序实现思路
  • 南通房屋登记系统
  • 安徽省纪检监察官网
  • 江苏城市规划
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设