Vue 之 Mixins (混入)的使用

是什么

混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被合并到组件本身,也就是说父组件调用混入对象的属性时用this即可。

怎么用

举个栗子:

定义一个混入对象

img

父组件引入混入对象

img

mixins的特点

1. 混入对象的方法和参数在不同的父组件中不共享

混合对象中的参数num

img

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

img

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

img

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

img

img

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

2. mixin的数据对象和组件的数据发生冲突时以组件数据优先。

img

组件中的方法

img

打印台的输出

img

3. 钩子函数

同名钩子函数如created , mounted等将会混合为一个数组,都将被调用到,但是混入对象的钩子将在父组件自身钩子之前调用。

img

组件函数中的console

img

打印台的打印

posted @ 2021-04-26 15:36  至安  阅读(793)  评论(0编辑  收藏  举报