vue2基础 - 混入对象 mixin 简单使用

mixins 是什么

混入对象 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

为什么用 mixins

从官方的介绍我们可以知道

• mixins的作用是抽取组件中相同的属性和方法到独立的文件，以便公用。
• mixins对象会被混入该组件本身，所有会有命名冲突。

我们来看下一个mixins对象的简单定义和使用

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 方式1使用：定义一个使用混入对象的组件
const Component = Vue.extend({
  mixins: [myMixin]
})

const component = new Component() // => "hello from mixin!"

// 方式2使用
<template>
  <div class="container">控制台会输出：hello from mixin!</div>
</template>

<script>
// 导入单文件组件的方式
import myMixins from "../mixins/my-mixin";
export default {
  name: "MixinsDemo",
  mixins: [myMixins],
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped>

</style>

方式2使用示例地址

从上面的示例我们可以看出mixin对象包含了组件的created生命周期钩子和method方法。
印证了特性1：mixin对象可以抽取组件中相同的属性和方法到独立的mixin.js文件，以便公用

如果我们在组件中也声明相同的属性或者方法，会出现什么问题呢？
印证了特性2：命名冲突问题。

1. 验证mixin和组件的调用顺序
我们在组件的created钩子增加一行输出，可以看到输入顺序是先执行mixin然后再执行vue组件的钩子函数。使用示例地址

2. 验证mixin和组件中存在同名属性或者方法是如何执行
我们在组件的method中增加hello方法，该方法在mixin文件中存在，可以看到输入结果是只调用组件中的结果。使用示例地址

 hello() {
      // 出现同名方法，优先使用组件中的属性和方法
      console.log("hello from MixinsDemo!");
    },

mixins 怎么用

复杂示例

全局混入

一般情况下不推荐使用全局混入，因为它会影响每一个之后创建的Vue实例。有需要可自行查看官方文档