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

  • 抖音探店怎么挂链接(抖音探店怎么挂链接赚佣金)

    抖音探店怎么挂链接(抖音探店怎么挂链接赚佣金)

  • 微信电脑版怎么删群(微信电脑版怎么@别人)

    微信电脑版怎么删群(微信电脑版怎么@别人)

  • 苹果11的白色浮球在哪设置(苹果11手机上的白色按钮怎么调出来)

    苹果11的白色浮球在哪设置(苹果11手机上的白色按钮怎么调出来)

  • 抖音上的图片如何保存到手机(抖音上的图片如何删除)

    抖音上的图片如何保存到手机(抖音上的图片如何删除)

  • 天猫精灵卡顿如何解决(天猫精灵很卡怎么办)

    天猫精灵卡顿如何解决(天猫精灵很卡怎么办)

  • 512固态够用吗(512固态够用吗玩游戏)

    512固态够用吗(512固态够用吗玩游戏)

  • 荣耀9xpro支持多少w快充

    荣耀9xpro支持多少w快充

  • 抖音怎么用图片评论(抖音怎么用图片找人)

    抖音怎么用图片评论(抖音怎么用图片找人)

  • 一个手机可以下载两个抖音软件吗(一个手机可以下载两个支付宝吗)

    一个手机可以下载两个抖音软件吗(一个手机可以下载两个支付宝吗)

  • 腾讯王卡可以开2张吗(腾讯王卡可以开副卡吗)

    腾讯王卡可以开2张吗(腾讯王卡可以开副卡吗)

  • 钉钉属于阿里系吗(钉钉是不是阿里的)

    钉钉属于阿里系吗(钉钉是不是阿里的)

  • 转发邮件会不会提醒原始发件人(转发邮件会不会被监控)

    转发邮件会不会提醒原始发件人(转发邮件会不会被监控)

  • g04指令是什么意思(g04x4指令)

    g04指令是什么意思(g04x4指令)

  • word纸张16开怎么设置(word16开的纸是多大的)

    word纸张16开怎么设置(word16开的纸是多大的)

  • 淘宝退款店铺红包会退吗(淘宝退款显示红色店铺有影响吗?)

    淘宝退款店铺红包会退吗(淘宝退款显示红色店铺有影响吗?)

  • ipad2怎么拆开(ipad2拆解图ipad2拆机教程全图)

    ipad2怎么拆开(ipad2拆解图ipad2拆机教程全图)

  • 脚注内容怎么设置(脚注在哪儿设置)

    脚注内容怎么设置(脚注在哪儿设置)

  • newtv是腾讯的吗(腾讯的tv叫什么)

    newtv是腾讯的吗(腾讯的tv叫什么)

  • 起始页码怎么设置(起始页码怎么设置为罗马数字)

    起始页码怎么设置(起始页码怎么设置为罗马数字)

  • hdr模式是什么意思(hdr mode)

    hdr模式是什么意思(hdr mode)

  • 搜狗搜索如何设置小窗口(搜狗搜索引擎设置)

    搜狗搜索如何设置小窗口(搜狗搜索引擎设置)

  • 安卓手机号码黑名单怎么解除(安卓手机号码黑名单怎么设置)

    安卓手机号码黑名单怎么解除(安卓手机号码黑名单怎么设置)

  • cad弧长快捷键(cad测量弧长命令)

    cad弧长快捷键(cad测量弧长命令)

  • app自动续费(app自动续费没有在苹果订阅中)

    app自动续费(app自动续费没有在苹果订阅中)

  • 鸟瞰施内贝格山脉-奥克森峰,德国 (© Felix Meyer/Adobe Stock)(施伦贝格尔)

    鸟瞰施内贝格山脉-奥克森峰,德国 (© Felix Meyer/Adobe Stock)(施伦贝格尔)

  • 若依框架前端Vue项目分析实战(若依框架前端发请求)

    若依框架前端Vue项目分析实战(若依框架前端发请求)

  • 土地价值计入房产税文件
  • 围挡属于什么类型
  • 调整未分配利润影响所得税吗
  • 纳税总额和实际上缴税费总额
  • 核定征收的收入总额包括营业外收入吗
  • 库存完工产品属于什么会计科目,什么类别
  • 土地增值税税收优惠
  • 收到的增值税
  • 一次性奖金收入如何交个税
  • 现金预算包括哪些内容,来源是什么
  • 应纳税调增调减会计分录
  • 利息收入的纳税调整
  • 门诊收入免税会增加吗
  • 银行收到理财资金怎么做账
  • 投资收益的表现形式
  • 电信宽带费发票专票
  • 私人账户转到企业账户
  • 小规模纳税人需要做账吗
  • 房地产企业预收房款开票
  • 供应商退回货款有时间限制吗
  • 滴滴打车怎么整
  • 机票改签费要开发票吗
  • 增值税即征即退会计处理
  • 食堂伙食费需要开票吗
  • 跨月预缴如何做账
  • 住院材料费包括哪些
  • 怎么利用腾讯手机号找人
  • 二手车买卖如何纳税
  • 私账的钱怎么弄到公账
  • 税控服务费政策
  • 企业接受捐赠的固定资产账务处理
  • 鸿蒙系统怎么隐藏状态栏
  • mac系统自带软件有哪些
  • linux的vi编辑器怎么用
  • php中字符串函数
  • php常见面试题
  • 商业企业收取的服务费
  • php数据库删除数据
  • 捆绑销售如何进行账务处理?
  • 企业所得税征前减免是什么意思
  • 字节在互联网什么地位
  • span标签中的字符串怎么获取
  • 已入账的发票跨年退回税务
  • shift命令 向左移动参数
  • 固定资产类别有哪些
  • 收据可以用来做账吗
  • 收到商业承兑汇票怎么兑现
  • 企业计提养老保险分录
  • 人力资源公司财务工作心得与感悟
  • 债权债务转让会计分录
  • 工资单应该盖什么章
  • MSSQL2005 INSERT,UPDATE,DELETE 之OUTPUT子句使用实例
  • PostgreSQL教程(十九):SQL语言函数
  • 党费会计核算科目有哪些
  • 现金流量明细分类
  • 小规模纳税人出租不动产优惠政策
  • 递延所得税资产和负债怎么理解
  • 车保险返点如何计算
  • 政府奖励金怎么发放
  • 开发成本期末如何结转
  • 连锁药店成本会计
  • 其他应付款转营业外收入摘要怎么写
  • 个体户能开建筑劳务发票吗
  • 请问购买
  • windows2003r2安装教程
  • Freebsd7.0+Apache2.2+MySQL5+PHP5安装配置
  • win10不能显示桌面
  • win8系统升级后怎么退回
  • 如何删除win8系统
  • linux在u盘中运行
  • webview实现有什么用
  • 每次开机windows桌面更新
  • js中切割字符串
  • 广东省电子税务局app下载
  • 辽宁省地税社保缴费基数
  • 锐志2.5新车报价
  • 地税征税范围
  • 保险行业税务处理
  • 青岛市税务管理局
  • 城镇土地使用税税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设