介绍

所谓的混入就是当各个组件中有一个部分完全一样的时候，我们可以将这个部分抽离出来，在各自的组件中删除代码，引入抽离的文件。

也就是说多个组件共享一个配置，复用配置项。

使用 mixins 时 data 和 methods 配置项重复的情况下:

• 当混合文件中有 组件内部没有的时候 以混合文件为主
• 当混合文件中没有 组件内部有 以组件内部的数据为主

使用 mixins 时 生命周期函数重复的情况下:

混合文件中的 和 组件中的生命周期都会调用

同名的钩子函数将合并为一个数组 因此都将被调用 另外mixin对象的钩子将在组件自身钩子之前调用

使用场景:

当组件的配置项中有重复的内容的时候 就可以使用混合 还可以将混合注册为全局混合

// 比如 两个组件都有 这样的一个地方 那么我就可以将这个部分抽离成一个js文件
methods: {
  showName() {
    console.log(this.name)
  }
}

使用方式:

在 根目录 中创建 mixins 文件夹 里面创建 js 文件

暴露一个对象 对象中是 vue 的一个个配置项 methods data ...

export const hunhe = {
  methods: {
    showName() {
      console.log(this.name)
    }
  }
}

上面把共通代码抽离成了一个js文件 接下来我们就在要使用的组件内部引入他们然后使用 混合配置项

配置项: mixins: []

如果有配置项完全一致的时候可以使用混合的功能 抽离相同的配置项 然后在mixins配置项中使用混合是按配置项为单位进行抽离

import {hunhe} from 'mixin.js'

export default {
  mixins: [hunhe]
}