Vue中的Mixin混入

有些数据、方法可以多个组件共用，而不必在每个组件都写一遍，共用方法放入mixin即可。

mixin定义

src目录新建mixin文件夹，新建index.js

export const mixins = {
 data(){
  return{
    msg:''
  }
 },
 created() {},
 mounted() {},
 computed: {},
 methods: {
  getxxx(){
    return x
  }
 }
}

全局混入

在main.js中：

import { mixins } from './mixin/index'
Vue.mixin(mixins)

局部混入

在需要使用混入的组件中引入

import { mixins } from './mixin/index'
export default ({
  mixins:[mixins]
})

使用

mixins data中定义的变量和方法均可可直接this.msg、this.getxxx()使用

注意事项

1. data必须return

export const myNotification = {
 data() {
  return{}//必须，不然加载不到
 },
 created() { },
 mounted() { },
 computed: {},
 methods: {}
}