vue中使用mixins
Mixins (混合或混入)——定义的是一个对象
1.概念:一种分发Vue组件可复用功能的非常灵活的方式。混入对象可以包含任意组件选项(组件选项:data、watch、computed、methods、created、mounted…)。当组件使用混入对象时,组件和混入对象的同名选项将以恰当的方式进行“合并”。
2.用法
1)定义一个混入对象mixin(创建一个mixin.js文件)
2)把混入对象mixin混入当前组件中
3.合并规则
1)data:数据在内部会进行递归合并,并在发生冲突时以组件数据优先(组件和混入对象的数据同一个参数名初始值不同,取组件的值)
2)created、mounted等:同名钩子函数将合并为一个数组,都将被调用且混入对象的钩子将在组件自身钩子之前调用
3)watch、computed、methods等:值为对象的选项,将被合并为同一个对象,两个对象键名冲突时会覆盖混入对象中的方法
4.特点
1)与vuex的区别
Vuex:用来做状态管理,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之改变
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量时相互独立的,值的修改在组件中不会相互影响
2)与公共组件的区别
公共组件:在父组件中引入组件,相当于在父组件中给出一篇独立的空间供子组件使用,然后根据props来传值,但本质上两者时相对独立的
Mixins:在引入混入对象之后,混入对象与组件中的同名选项进行合并,相当于扩展了父组件,可以理解为形成了一个新的组件
5.注意
当混入对象methods选项里面包含异步请求函数,而我们又需要再组件中使用异步请求函数的返回值,会出现取不到此返回值的情况
Mixin中
组件中
此时会打印undefined
解决方案:不要返回结果而是直接返回异步函数
Mixin中
组件中
参考文章地址:1.https://www.cnblogs.com/Ivy-s/p/9937173.html
2.https://cn.vuejs.org/v2/guide/mixins.html
最新文章
- php+websocket搭建简易聊天室实践
- 【WCF全析(一)】--服务协定及消息模式
- 入门级:怎么使用C#进行套接字编程(一)
- 【收藏用】--切勿转载JAVA 使用Dom4j 解析XML
- 十八、Android引导界面
- Linux自动备份MySQL数据库脚本代码
- CH Round #53 -GCD Path
- Composer 基本指令操作使用
- HDU_1245_Saving James Bond_最短路
- JDBC连接(MySql)数据库步骤,以及查询、插入、删除、更新等十一个处理数据库信息的功能
- mpls vpn剩余笔记
- C语言第三次博客作业
- Windows10上搭建Kinect 2 开发环境
- easyui表格排序
- Java基础(进制转换-)
- 前端基础之 html
- E. Superhero Battle
- 编写高质量代码:改善Java程序的151个建议 --[98~105]
- skywalking学习之路---skywalking环境从零搭建部署
- String类的一些细节
热门文章
- C#多线程(14):任务基础②
- Python学习15之python内置六大标准类型
- time_t 是不定长的,如果写在superblocck里,要用定长的类型
- Phaser都不懂,还学什么多线程
- SpringBoot @ConfigurationProperties详解
- CentOS7编译安装NodeJS
- Express 文档(常见问题)
- php数组存在重复的相反元素,去重复
- Java 线程池(ThreadPoolExecutor)原理分析与实际运用
- [CodeForces-259C] Little Elephant and Bits