Vue之Mixins(混入)的使用方法

下面是“Vue之Mixins(混入)的使用方法”的完整攻略。

什么是Mixins（混入）

Mixin是一种以重用为主的组件方式。其实就是将多个Vue组件中可重用的配置对象提取出来，然后通过mixins把这些对象合并到Vue组件中的属性和方法中，这样就可以使得这些Vue组件共享相同的功能和配置。

Mixins的使用方法

要使用Mixins，需要在Vue组件中使用mixins选项。

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用mixin的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

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

在上面的代码中，我们定义了一个名为myMixin的Mixin，并使用mixins选项在Vue组件中引用了它。当Component组件被创建时，它会执行created钩子函数，这个钩子函数由我们在myMixin中定义，然后我们在hello方法中向控制台输出了一条“hello from mixin!”的消息，因此当Component组件被创建时，这条消息会被输出到控制台中。

Mixins的位置和命名

Mixins通常会存储在单独的文件中，文件名一般以Mixin命名。

例如我们在项目中创建了一个helper.js文件，里面定义了一个名为myMixin的Mixins。

const myMixin = {
  created: function () {
    console.log('hello from myMixin!')
  },
  methods: {
    sayHello: function () {
      console.log('say hello from myMixin!');
    }
  }
}

export default myMixin;

接着我们就可以在我们的Vue组件中使用myMixin了。

import myMixin from './../myMixin.js'

const App = {
    mixins: [myMixin],
    ...
  }

Mixins的合并策略

Mixins最好只包含需要被多个组件共享的配置属性和方法，在Vue组件中使用Mixins时，Vue会根据一定的合并策略，把Mixins中的属性和方法合并到Vue组件中。合并的策略大致如下。

对象类型的属性和方法（methods、computed、watch等）会被合并到Vue组件中。如果同名的方法或属性已在Vue组件中定义，则两者都会存在，Mixins定义的属性或方法会优先级高于Vue组件内定义的。
如果Mixins和Vue组件都定义了一个同名的钩子函数（如created、mounted等），那么两个钩子函数都会被执行，Vue会先执行Mixins中定义的钩子函数，然后再执行Vue组件的。
Mixins中的生命周期钩子函数会在Vue组件中的钩子函数之前执行。
Mixins的选项在Vue组件之前被解析，因此在Mixins中不允许使用data和props，这两个属性必须由Vue组件来定义。
Mixins可以是一个数组，这样多个Mixins中定义的同名属性和方法都会按顺序被合并。

Mixins的示例

下面我们通过两个示例，更加深入的理解Mixins的使用方法。

示例1：封装AJAX请求

我们可以创建一个名为ajaxMixin.js的Mixin，用来封装一个基本的AJAX请求逻辑，这被许多组件所用到。这个Mixin大致如下：

const ajaxMixin = {
  methods: {
    $ajax: function(options) {
      // AJAX实现
      console.log('开始发起AJAX请求啦: '+ options.url)

      // 模拟AJAX请求完成
      setTimeout(()=>{
        options.success({
          code: 0,
          message: "success",
          data: {
            name: "Vue",
            version: "3.0.0"
          }
        })
      },2000)
    }
  }
}

export default ajaxMixin;

在我们的Vue组件中，我们引入了这个Mixin，并在mounted钩子函数中开始使用，示例如下：

import ajaxMixin from "../ajaxMixin";

const App = {
  mixins:[ajaxMixin],
  data() {
      return {
          name:"",
          version:""
      }
  },
  mounted() {
      console.log('组件已被挂载');
      this.$ajax({
          url:"http://www.example.com/vue/version",
          success:(result)=>{
              console.log('请求成功');
              this.name = result.data.name;
              this.version = result.data.version
          },
          error:()=>{
              console.log("请求失败");
          }
      });
  }
}

export default App

在上面的代码中，我们定义了一个名为ajaxMixin的Mixin，并在App组件中引入了它。然后我们在mounted钩子函数中使用this.$ajax()来发起了一个AJAX请求。可以看到由于ajaxMixin的引入，请求AJAX的逻辑被提取出来，节省了我们的代码量。

示例2：实现Tab切换

我们可以创建一个名为tabMixin.js的Mixin，用来实现Tab切换的通用逻辑，这被许多组件所用到。这个Mixin大致如下：

const tabMixin = {
  data() {
      return {
          activeIndex:0
      }
  },
  methods: {
      setActive(index) {
          this.activeIndex = index
      }
  }
};

export default tabMixin;

在我们的Vue组件中，我们融入这个Mixin，并利用里面的setActive方法来处理我们需要的逻辑，示例如下：

import tabMixin from "../tabMixin";

const Tabs = {
  mixins:[tabMixin],
  template:`
      <div>
          <ul>
              <li v-for="(tab,index) in tabs" :class="{active: activeIndex === index}" @click="setActive(index)">
                  {{tab}}
              </li>
          </ul>

          <div v-for="(tab,index) in tabs" :class="{active: activeIndex === index}" >{{contentText}} {{tab}}</div>
      </div>
  `,
  data(){
      return {
          tabs: ['Home','Work','About']
      }
  },
  props:{
      contentText: {
          type:String,
          default: 'This is the '
      }
  }
};

export default Tabs

在上面的代码中，我们定义了一个名为Tabs的Vue组件，并在其中引入了tabMixin。然后我们在组件定义的模板中，利用tabMixin中提供的setActive方法，来实现Tab切换逻辑。