Vue之mixin全局的用法详解-前端开发

Vue中的mixin（混入）机制可以让组件之间的代码可以进行复用，即在多组件中共用同一段代码，而不用把这段代码写在多个组件里。这对于代码复用、减少冗余代码是一个非常好的解决方案。mixin可以理解为是一种能够让我们将组件的一部分功能提

Vue之mixin全局的用法详解

1. 概述

Vue中的mixin（混入）机制可以让组件之间的代码可以进行复用，即在多组件中共用同一段代码，而不用把这段代码写在多个组件里。这对于代码复用、减少冗余代码是一个非常好的解决方案。mixin可以理解为是一种能够让我们将组件的一部分功能提取出来，并进行重复利用的机制。

2. 语法

下面是mixin的语法：

var mixin = {
  data() {
    return {
      name: 'Andy'
    }
  },
  methods: {
    changeName(name) {
      this.name = name;
    }
  }
}

在组件中使用mixin：

var component = {
  mixins: [mixin],
  data() {
    return {
      age: 18
    }
  }
}

*mixin对象中的属性会被混入到所有引用它的组件中，即组件中的$option对象；

*如果组件和mixin中有同名选项，则组件的选项会覆盖mixin的选项；

*如果选项值为对象，则会进行合并操作；

下面是一个完整示例：

var mixin = {
  data() {
    return {
      name: 'Andy',
      age: 18
    }
  },
  computed: {
    fullName() {
      return this.name + ' ' + this.age;
    }
  },
  methods: {
    changeName(name) {
      this.name = name;
    }
  }
}

var component = {
  mixins: [mixin],
  created() {
    console.log(this.fullName); // "Andy 18"
    this.changeName('Lucy');
    console.log(this.fullName); // "Lucy 18"
  }
}

new Vue(component);

3. mixin在Vue中的应用

3.1 mixin的全局属性

我们可以将mixin全局注册，这就意味着其被引用的所有组件都将应用该mixin的选项。

// mixin.js
var mixin = {
  methods: {
    test() {
      console.log('测试方法');
    }
  }
}

export default mixin;

在main.js中全局注册mixin：

import Vue from 'vue';
import mixin from './mixin.js';

Vue.mixin(mixin);

new Vue({
  el: '#app1'
});

new Vue({
  el: '#app2'
});

<div id="app1">
  <button @click="test">测试</button>
</div>

<div id="app2">
  <button @click="test">测试</button>
</div>

在两个不同的Vue实例中，我们都使用了同一段代码test方法。这里test方法已经被全局定义，不需要在每个组件中定义一遍代码，可以避免代码的重复。

3.2 mixin进行选项合并

如果一个组件和一个mixin的选项相同，则组件的选项会覆盖mixin的选项。如果选项值为对象，则会进行合并操作。

var mixin = {
  data() {
    return {
      message: 'mixin中的数据'
    }
  },
  methods: {
    showMessage() {
      console.log('mixin的showMessage方法');
    }
  }
}

var component = {
  data() {
    return {
      message: '组件中的数据'
    }
  },
  methods: {
    showMessage() {
      console.log('组件的showMessage方法');
    }
  },
  mixins: [mixin]
}

如果代码中的组件或mixin都有一个数据属性message和一个方法showMessage，那么 component 选项会覆盖 mixin 的选项。 mixin.showMesssage 的方法会在 component.showMessage 方法前被调用。