vue cli 局部混入mixin和全局混入mixin

应用场景：

两个组件，都需要用到同一个点击事件方法，此时使用mixin混入，可以很好的实现代码的复用。

 在vue cli搭建的项目中，src目录下新建mixin.js文件：

// 对外暴露mixin对象
export const mixin = {
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    click() {
      alert('你点我了')
    }
  }
}

export const mixin2 = {
  mounted() {
    console.log('mounted');
  }
}

App.vue中引入两个组件Student和School：

1、局部混入mixin

Student和School两个组件中点击第一行的文字会弹出提示：‘你点我了’，组件中分别引入mixin混入，

Student.vue:

School.vue:

 2、全局混入mixin

在main.js中引入暴露的mixin对象：

import {mixin} from './mixin'

// 引入多个mixin
import {mixin, mixin2} from './mixin'

// 全局混入
Vue.mixin(mixin)

// Vue.mixin(mixin2)

 页面效果：

mixin对象中的msg也会混入到Vue实例和组件中。

如果想要同时引入两个混入，则使用下面的引入方式多引入一个变量即可：

import {mixin, mixin2} from '../mixin'

如果组件和混入mixin中同时有钩子函数如mounted，则均会执行。