(转)Vue中mixin的理解

mixins基础概况

vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~

混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

怎么用?

举个栗子:

  • 定义一个混入对象
image
  • 把混入对象混入到当前的组件中
image

用法似不似相当简单呀

mixins的特点

1 方法和参数在各组件中不共享

混合对象中的参数num

image

组件1中的参数num进行+1的操作

image

组件2中的参数num未进行操作

image

看两组件中分别输出的num值

image
image

大家可以看到,我在组件1里改变了num里面的值,组件2中的num值还是混入对象里的初始值

2 值为对象的选项,如methods,components等,选项会被合并,键冲突的组件会覆盖混入对象的

混入对象中的方法

image

组件中的方法

image

打印台的输出

image

3 值为函数的选项,如created,mounted等,就会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用

混入对象函数中的console

image

组件函数中的console

image

打印台的打印

image

与vuex的区别

经过上面的例子之后,他们之间的区别应该很明显了哈~

  • vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。

  • Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。

与公共组件的区别

同样明显的区别来再列一遍哈~

  • 组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。

  • Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,072评论 0 29
  • 我叫小金,与白素贞、小青是一个爹一个娘的兄弟,我们出身在峨眉山,每天的生活都是愉快的嬉戏打闹,突然有一天,王母打算...
    d4f2132148fb阅读 500评论 0 1
  • 扬州方圆~~周亮 【知~学习】学习一级建造师考试内容 《六项精进》3遍。累积174遍 《大学》3遍。累积174遍 ...
    扬州方圆__周亮阅读 92评论 0 1
  • 120年前,面对一个积贫积弱、内忧外患的中国,一批仁人志士发动“戊戌变法”,试图找到一条民族复兴、国家富强的道路,...
    依然如水阅读 499评论 0 4
  • 秋高气爽,作为一个热爱时尚的女生,除了衣著打扮、护肤品要换季外,就连10个小指上的彩绘,也该和单调的色彩 say ...
    尚熙阅读 778评论 0 0