vue中mixin的用法详解

许多人应该都用过Vue，但是可能很多人不知道mixin这个东西的存在，也许知道但是不怎么使用，在此我说下我对mixin的一点理解

mixin的使用场景

其实如果使用过sass中的@mixin应该就会有种熟悉感，对于sass的@mixin当然是为了某些样式的重复使用，而vue中提供了一种混合机制--mixins是用来更高效的实现组件内容的复用

在项目中有两个相似的组件，它们之间逻辑大致相同，但是还是存在差异，这个时候我们有两个选择，一个就是把它们分开当作两个组件互不干扰来维护，但是这样如果逻辑发生了变化，就要两个里面都需要改变，这样肯定就不利于维护，第二个就是把他们合并成同一个组件，然后用props来传值的方式创造差异性来区分，但是这样太多的props传值很快就变得混乱不堪，在使用组件的时候必须理解一大段的上下文，使得使用效率变差。

mixin的简单用法

1.定义一个 js 文件(mixin.js)

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

2.在vue文件中使用mixin

import mixin from '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

Vue组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

合并

在上面的用法介绍大家可能知道mixin的方法混入到了引入者的里面，如果我想要mixin的方法，那么我就会引入mixinjs，但是如果某个方法我们稍微有些许差异的话，我们应该怎么做呢？

      //mixin
      const hi = {
        methods: {
          sayHello: function() {
            console.log('hello from mixin!')
          },
           sayNo: function() {
             console.log('hello from mixin!')          }        },
        mounted() {
          this.sayHello()
        }
      }

      //vue instance or component
      new Vue({
        el: '#app',
        mixins: [hi],
        methods: {
          sayHello: function() {
            console.log('hello from Vue instance!')
          }
        },
        mounted() {
          this.sayHello()
        }
      })

      // Output in console
      > hello from Vue instance!
      > hello from Vue instance!

可以看到上面的例子，我想要用mixinjs里面的sayNo的方法，但是sayHello我们有些差异，那这样时候，我们自己在组件里面写了sayHello方法其实就可以了

你可能已经注意到这有两个console.log而不是一个——这是因为第一个函数被调用时，没有被销毁，它只是被重写了。我们在这里调用了两次sayHello()函数。

结论