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

【Vue】Mixin 混入的基础语法(1)

学习内容:
(1)学习 Vue 里面复用性代码该怎么去写(组件?)

学习过程:

首先来学习 mixin 这样的知识点,来看示例代码:

mixin是什么概念?它是一个混入的概念,混入就是把一些内容混入到哪里去?
首先我定一个myMixin,【第15行】

myMixin它是一个混入,等于一个对象{}。‍‍在对象里面我也定一个data,然后它return一个number是2,‍‍这样的话我就定义了一个混入的内容,

它就是一个对象里面有一个data的东西,这个data其实和我们在组件里面 在 Vue 的实例里面写 data 是一样的,
然后我把混入混到组件里面来,‍‍怎么混?代码写注释

我们写一下 minxins,然后让它等于一个数组,‍‍在这个数组里面我们使用 myMixin,它的意思就是我在我的 Vue 的实例上面‍‍去使用minxins这样的内容。‍‍

那么你可以理解成myMixin里面的data也会混进来,‍‍它会不会覆盖掉我们这个实例里面原来的 data,【第21行】

可以看到实例上的number是1:

你混入进来的一个number是2:

现在打印出的number究竟是几?保存一下,然后回到页面上刷新,来看一下:

这个时候你会发现它打印出的 Number是 1,也就是使用的数据内容还是组件里的数据内容,‍‍假设我把组件里的data给它去掉:

保存一下,然后再刷新:

你发现这个时候‍‍它里面myMixin好像并没有生效,这块是我写错了,改正之后:

写对了之后我们再刷新,它展示的是2:

也就是说当你组件里没有数据的时候,我会使用你混入进来的数据,‍‍但是当你组件里也有这个数据,我再把它打开的时候,我们刷一下,你会发现它会用1。

当你混入的一些内容,‍‍如果和我组件里的一些内容有一些冲突的话,比如说你data里的数据冲突了,那么谁都优先级更高呢?‍‍【重点记住】

组件里面的数据的优先级比混入的数据的优先级更高,

所以组件‍‍ data 优先级高于mixin data优先级。‍‍

你在mixin里面除了定一个number之外,你可以再给它定一些其他的东西,比如说count:

你定义了count之后,ta会把 count混入到 app实例里面 对应的 data里面来,‍‍现在只要你在app应用的实例里面用了 mixin之后,理论上你在这直接就可以用count了,‍‍因为它会把 count混进来:

这就是混入的概念,就是一个对象,我把它混到我的应用里,或者混到我的组件里,就这么简单。‍‍

继续,比如说data可以混入,生命周期函数可不可以混入?
比如说在这里我写 created()这样的生命周期函数:

我们回到浏览器上刷新一下,看一下控制台的输出:

你会发现mixin created也会被执行,说明什么?‍‍
说明你这种生命周期函数也可以通过这种混入的形式混到我的应用里或者组件里,

假设‍‍我这个组件里面也有自己的这种生命周期函数,怎么办?
比如说:

保存,然后刷新:

这个时候 mixin created 和 created‍‍都会执行,也就是说我们下面写的生命周期函数没有把mixin里面的对应的内容覆盖掉,

像data一样,如果是data的话那就覆盖了,但是你发现如果是这种生命周期函数的话,它会怎么样?它不会覆盖,两个都会执行。‍‍

先执行myMixmin里面的 created:

再执行我组件自己的生命周期函数。‍‍

所以生命周期函数。先执行mixin里面的‍‍,再执行组件里面的:

对于methods里面的内容,它如果在 mixin 里有,‍‍那就会用mixin里的,
如果你自己的组件里也有,自己的组件 实际上会覆盖掉 mixin 里的 handleClick,‍‍
所以组件的方法的优先级还是高于mixin 方法的优先级的,
所以组件的data以及‍‍methods的优先级高于 mixin里面的data和methods的优先级。

相关文章:

  • JavaEE:synchronized关键字
  • 全开源二次元风格发卡
  • 时序分析 45 -- 时序数据转为空间数据 (四) 格拉姆角场 python 实践 (下)
  • qmake *.prf文件 自定义features
  • 深度学习目标检测入门论文合集讲解
  • c++11 日期和时间工具(std::chrono::duration)(二)
  • DataStructure_树的基本性质(m叉树和二叉树)
  • Flask 学习-76.Flask-RESTX 处理异常@api.errorhandler
  • Java Boolean类中booleanValue()方法具有什么功能呢?
  • c# 与stm32之间结构体的收发
  • java集合专题Map接口及HashMap/Hashtable/Properties使用方法底层结构及源码分析
  • Vue(六)——vuex
  • JavaScript 学习-47.export 和 import 的使用
  • Kafka 生产者
  • Spring核心IOC的核心类解析
  • [译] 怎样写一个基础的编译器
  • 【笔记】你不知道的JS读书笔记——Promise
  • Computed property XXX was assigned to but it has no setter
  • Effective Java 笔记(一)
  • Median of Two Sorted Arrays
  • OpenStack安装流程(juno版)- 添加网络服务(neutron)- controller节点
  • python大佬养成计划----difflib模块
  • Theano - 导数
  • vue2.0项目引入element-ui
  • 工作中总结前端开发流程--vue项目
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 简单实现一个textarea自适应高度
  • 浏览器缓存机制分析
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 使用Swoole加速Laravel(正式环境中)
  • 数组大概知多少
  • 移动互联网+智能运营体系搭建=你家有金矿啊!
  • 在Docker Swarm上部署Apache Storm:第1部分
  • 怎么将电脑中的声音录制成WAV格式
  • Nginx实现动静分离
  • NLPIR智能语义技术让大数据挖掘更简单
  • ​LeetCode解法汇总2808. 使循环数组所有元素相等的最少秒数
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (2)(2.4) TerraRanger Tower/Tower EVO(360度)
  • (k8s中)docker netty OOM问题记录
  • (翻译)Entity Framework技巧系列之七 - Tip 26 – 28
  • (附源码)springboot家庭装修管理系统 毕业设计 613205
  • (附源码)ssm本科教学合格评估管理系统 毕业设计 180916
  • (六)c52学习之旅-独立按键
  • (论文阅读23/100)Hierarchical Convolutional Features for Visual Tracking
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • .[hudsonL@cock.li].mkp勒索病毒数据怎么处理|数据解密恢复
  • .NET CF命令行调试器MDbg入门(二) 设备模拟器
  • .net Stream篇(六)
  • .net 使用ajax控件后如何调用前端脚本
  • .Net转Java自学之路—SpringMVC框架篇六(异常处理)
  • ::什么意思
  • @CacheInvalidate(name = “xxx“, key = “#results.![a+b]“,multi = true)是什么意思
  • @RequestMapping 的作用是什么?