跳到主要内容

16

1. 前言​

本节介绍混入 (mixin) 的使用方法。包括什么是 mixin，如何定义 mixin，mixin 重名属性的合并策略，全局 mixin 的使用。其中，了解和掌握 mixin 重名属性的合并策略非常重要，属性合并问题会在 mixin 的使用中经常出现。在学完本小节之后，同学们可以尝试总结出属性的合并的规则策略，这有助于加深印象，在日后的使用中也能得心应手。

2. 慕课解释​

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

我们在日常开发中经常遇到多个页面或者功能模块有相同代码逻辑的情况，同学们在遇到此类情况的时候肯定会想：如果这段代码能够复用就好了！。那什么方法可以帮助我们实现复用呢？答案就是：Mixin！ Mixin 帮助我们抽离公共代码逻辑。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被 “混合” 进入该组件本身的选项。

3. 使用 mixin​

接下来我一起看看如何定义和使用一个 mixin。

对于 mixin 的使用可以分为两部分：

  1. 定义 mixin
  2. 混入 mixin

3.1 定义一个 mixin​

mixin 本质上就是一个 Object 对象，它和 vue 实例上的属性一致，包含 data、methods、computed、watch、生命周期函数等等：

var myMixin = {
  data(){
    return {
      //...
    }
  },
  created() {
     //...
  },
  methods: {
    //...
  },
  computed() {
    // ...
  }
}

3.2 混入 mixin​

想要混入定义好的 mixin，只需要通过组件的 mixins 属性传入想要混入的 mixin 数组即可：

var vm = new Vue({
  el: '#app',
  mixins:[myMixin]
})

代码解释：

上述代码中，我们定义了一个 Vue 实例，并在实例上混入 myMixin。

接下来我们看一个简单的示例：