2021-04-11

vue-混入的用法

日常开发中，我们可能会用到一些公共的方法，公共的数据源，但是在每个用到的组件中去书写太过于麻烦，那么我们如果用vue给我们提供的混入方法将会非常的高效。首先来看一下全局混入

全局混入

配合插件实现全局混入，在utils文件夹下面建立index.js文件，在该文件中，我们可以定义一些公共方法和data数据，包过vue中的钩子函数也可以在此声明例如下面的代码

const myPlugin = {}
myPlugin.install = function (vue) {
  vue.mixin({
    data() {
      return {
        apple: '红苹果'
      },
        methods: {
        getSum(a, b){
          return a + b
        }
      }
    }
  })
}
export default myPlugin

然后我们在main.js中引入myplugin，在调用就好了

import myPlugin from '@/utils'
vue.use(myPlugin)

这样我们就能在全局任何一个组件中直接取定义的变量了

局部混入

局部混入不用在main.js中引入，不需要和插件相配合，utils中这样写

const mymixin = {
  data() {
    return {
      apple: '红苹果'
    }
  },
  mounted() {
    console.log(456);
  },
  created() {
    console.log(123);
  }
}
export default mymixin

在我们运用到的组件中导入后直接用就好了

import mixin from "./utils";
mixins:[mixin]

这样就可以直接调用了