导航

介绍

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

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

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

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

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

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

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

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

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

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

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

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

import {hunhe} from 'mixin.js'

export default {
  mixins: [hunhe]
}

使用这种方式的混合所有的vm vc都会得到混合文件中的东西我们在入口文件中引入混合文件和配置

全局配置混合

import {hunhe, hunhe2} from 'mixin.js'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

data

每个 mixin 都可以拥有自己的 data 每个 data 函数都会被调用并将返回结果合并在数据的 property 发生冲突时会以组件自身的数据为优先。
值为对象的选项

例如 methods、components 和 directives 将被合并为同一个对象。两个对象键名冲突时取组件对象的键值对。