Vue进阶 | Mixin的使用场景

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

Mixin

mixin属于计算机领域专业词汇，原有含义就是“混入”之意。它的目的是分发 Vue 组件中的可复用功能。

如果有多个页面用到相同的逻辑或者函数等，比如比较经典的后台管理系统，大部分页面涉及到表格、表单的操作，就可以选择使用mixin来实现代码的复用。

看起来似乎和组件的作用很像，那他们又有什么区别呢？

• 组件：主页面中调用子组件，形成父子关系，利用props/emit等进行交互，父子组件是相互独立的两个模块。
• mixin：主页面引入mixin之后与页面原有的对象和方法进行合并，页面中可以直接调用mixin中的变量以及方法。

分类

在Vue中mixin分为两种：

1. 全局混入

全局混入会影响到每一个Vue，导入一次即可全局使用，它常用于插件的编写。混入位置：初始化实例之前。 （注：全局混入使用需要慎重，因为可能会导致代码污染）

Vue.mixin({ 
    created: function () { 
        // 全局混入 TODO
    } 
})

3. 局部混入

在页面中引入

 mixins: [
    {
      data() {
        return {
          testData: 2,
        };
      },
    },
  ]

使用

一个混入对象可以包含任意组件选项（如data、components、methods 、created、computed等等在Vue种常见的这些选项，都可以写入mixin）

实现形式：js对象

比如封装一个常用的表单form，我们可以建立一个mixin.js文件 在文件中配置，并进行导出 ( export default form )

在需要使用的页面中，导入并配置：

import myMixins from "../index.js"; // 导入
export default {
    name: 'Dashboard',
    mixins: [myMixins] // 使用混入
}

当我们在上面的form的生命周期中写入语句时，调用的页面会执行，并且进行相应的输出，比如这样：

在混入中加入函数，页面中虽然没有直接声明函数，但是可以直接使用混入minin中定义的函数 this.saHhello()，输出 ：hello~~~~~~hello~~~~~~