当前位置: 首页 > news >正文

vue中的mixins(混入)使用场景介绍

什么是mixins(混入)?
mixins是对vue组件的一种扩展,将一些公用的常用数据或者方法,构建一个可被混入的数据结构,被不同的vue组件进行合并,就可以在不同的vue组件中使用相同的方法或者基础数据。

稍微有点理解vue混入的同学,可能会感到困惑,mixins和vue的公共组件或者vuex很相似。

mixins和vuex的区别。
vuex公共状态管理,在一个组件被引入后,如果该组件改变了vuex里面的数据状态,其他引入vuex数据的组件也会对应修改,所有的vue组件应用的都是同一份vuex数据。(在js中,有点类似于浅拷贝)
vue引入mixins数据,mixins数据或方法,在每一个组件中都是独立的,互不干扰的,都属于vue组件自身。(在js中,有点类似于深度拷贝)

mixins和公共组件的区别
通用的数据和方法,确实可以提出一个通用的组件,由父子组件传参的形式进行分享公用。

公共组件
子组件通过props接收来自父组件(公共组件)的参数或者方法,但vue不建议,子组件直接修改props接收到的父组件的数据。需要在子组件的data中或者computed中定义一个字段来接收。(有点麻烦)
公共组件最主要的作用还是复用相同的vue组件(有视图,有方法,有状态
)。

mixins
如果只是提取公用的数据或者通用的方法,并且这些数据或者方法,不需要组件间进行维护,就可以使用mixins。(类似于js中封装的一些公用的方法)

相关文章:

  • webpack中,devServer.proxy跨域无效的解决办法
  • 数组里的字符串转换成数字或者把数字转换成字符串
  • 小米运动蓝牙耳机使用说明书-如果第二次切换到配对状态
  • el-input只能输入数字
  • element多个弹窗层级问题
  • 浅谈测试左移和测试右移
  • js去除字符串中的所有空格(包括前后,中间存在的所有空格)
  • js判断数组是否有重复值
  • 0-100
  • CSS文本超过两行用省略号代替(兼容所有浏览器)
  • 穿梭框+el-tree,递归实践
  • el-tree点击变disabled
  • css /deep/
  • json可视化在vue应用中的实现
  • Please use the --no-verify flag to skip running lint-staged.
  • 【跃迁之路】【699天】程序员高效学习方法论探索系列(实验阶段456-2019.1.19)...
  • C++类的相互关联
  • CAP 一致性协议及应用解析
  • Otto开发初探——微服务依赖管理新利器
  • React Native移动开发实战-3-实现页面间的数据传递
  • Spring Cloud(3) - 服务治理: Spring Cloud Eureka
  • vue自定义指令实现v-tap插件
  • 安卓应用性能调试和优化经验分享
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 基于游标的分页接口实现
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 用 Swift 编写面向协议的视图
  • 400多位云计算专家和开发者,加入了同一个组织 ...
  • TPG领衔财团投资轻奢珠宝品牌APM Monaco
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • ​草莓熊python turtle绘图代码(玫瑰花版)附源代码
  • ​创新驱动,边缘计算领袖:亚马逊云科技海外服务器服务再进化
  • (C语言)输入自定义个数的整数,打印出最大值和最小值
  • (第27天)Oracle 数据泵转换分区表
  • (多级缓存)多级缓存
  • (二)换源+apt-get基础配置+搜狗拼音
  • (附源码)SSM环卫人员管理平台 计算机毕设36412
  • (附源码)ssm码农论坛 毕业设计 231126
  • (幽默漫画)有个程序员老公,是怎样的体验?
  • (原创) cocos2dx使用Curl连接网络(客户端)
  • (转)原始图像数据和PDF中的图像数据
  • .L0CK3D来袭:如何保护您的数据免受致命攻击
  • .NET Compact Framework 3.5 支持 WCF 的子集
  • .Net Web项目创建比较不错的参考文章
  • .NetCore项目nginx发布
  • .NET单元测试
  • .NET的数据绑定
  • .NET开发不可不知、不可不用的辅助类(三)(报表导出---终结版)
  • @data注解_一枚 架构师 也不会用的Lombok注解,相见恨晚
  • [1]-基于图搜索的路径规划基础
  • [android学习笔记]学习jni编程
  • [AX]AX2012 R2 出差申请和支出报告
  • [C++] sqlite3_get_table 的使用
  • [DAU-FI Net开源 | Dual Attention UNet+特征融合+Sobel和Canny等算子解决语义分割痛点]
  • [ERROR ImagePull]: failed to pull image k8s.gcr.io/kube-controller-manager失败