vuejs中使用mixin局部混入/全局混入的方法详解

下面我详细讲解下“vuejs中使用mixin局部混入/全局混入的方法详解”。

什么是Mixin？

在VueJS中，Mixin是一种可以将多个组件中重复的代码封装成可复用的功能的方法。你可以将一些常见的代码部分提取出来形成一个Mixin对象，然后将它应用到多个组件中去。

全局混入

全局混入是指将Mixin全局应用于所有的Vue实例中去。这样做的好处是可以避免重复代码，并且对所有组件起效。但是需要注意的是，如果Mixin中的属性或方法与组件本身相冲突，会造成不可预知的结果。下面是一个示例说明：

//定义一个名为publish的全局mixin
Vue.mixin({
  data: function () {
    return {
      author: 'John Doe'
    }
  },
  methods: {
    publish: function () {
      console.log('Published by ' + this.author)
    }
  }
})

//组件1
Vue.component('my-component', {
  template: '<div><p>{{author}}</p><button @click="publish">Publish</button></div>',
  data: function () {
    return {
      title: 'My Vue App'
    }
  },
  methods: {
    publish: function () {
      console.log('Published by component1!' + this.author)
    }
  }
})

//组件2
Vue.component('my-component2', {
  template: '<div><p>{{author}}</p><button @click="publish">Publish</button></div>',
  methods: {
    publish: function () {
      console.log('Published by component2!' + this.author)
    }
  }
})

//创建Vue实例
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上述示例中，我们定义了一个名为publish的全局Mixin，在组件1和组件2中都添加了一个按钮调用此方法。在组件1中，我们重写了publish方法，并在其中增加了字符串"component1"，那么当我们点击组件1中的“Publish”按钮时，控制台上会输出"Published by component1!John Doe"。而当我们点击组件2中的按钮时，会输出"Published by John Doe"，原因是组件2没有重写publish方法，采用的是Mixin中的方法。

局部混入

局部混入是指将Mixin只应用于特定组件中。这种方式可以避免全局混入中的潜在冲突，并更加精确地控制代码的复用。下面是一个示例说明：

//创建一个名为localMixin的mixin对象
var localMixin = {
  data: function () {
    return {
      count: 0
    }
  },
  methods: {
    increment: function () {
      this.count++
    }
  }
}

//组件1
Vue.component('component1', {
  template: '<div><p>{{count}}</p><button @click="increment">Increment</button></div>',
  mixins: [localMixin]
})

//组件2
Vue.component('component2', {
  template: '<div><p>{{count}}</p><button @click="increment">Increment</button></div>',
  mixins: [localMixin]
})

//创建Vue实例
var app = new Vue({
  el: '#app'
})

在上述示例中，我们定义了一个名为localMixin的mixin对象，对象中包含了一个计数器count和一个increment方法，increment方法中用于将计数器+1。组件1和组件2均引用了此mixin，并且共用了计数器和increment方法。这样做的好处是组件与mixin之间保持解耦，怎么使用mixin由组件开发者自己决定。

总的来说，使用Mixin可以避免重复代码，使代码更简洁、易维护，提高组件的复用性。但是需要根据实际情况选择合适的方法（全局混入或局部混入）来应用Mixin。