在vue中如何使用mixin复用代码

在vue中可以用mixin来复用代码，包括 data、methods、created 等等使用方法非常简单如下

定义一个mixin.js文件来书写服用要的代码

const mixins = {
    data(){
        return{
          msg:'mixins的代码'
        }
    },
    created () {
        console.log('mixins的created')
    },
    methods: {
        doCon() {
            console.log(this.msg)
        }
    }
}

export default mixins

在要使用的组件中导入注册，语法如下

<template>
  <div id="app">
    <button @click="doCon">点击</button>
  </div>
</template>

<script>
import mixins from './mixins'
export default {
  name: 'App',
  mixins:[mixins]
}
</script>

输出如下

 要实现服用的话，就要在想要使用的组件内再次引入、注册就很麻烦，所以有更方便全局导入，会影响内一个创建的vue实例

在main.js中导入

import mixin from './mixins'
Vue.mixin(mixin)

就可以了不用再每个组件内都导入，注册