vue引入mixin

首先创建一个mixin.js文件，里面写好我们所需要的公共代码，例如：

export default {
  data(){
    return  {
      commonData:'我是公共数据',
      showModal:true
    }
  },
  created(){
    console.log(this.commonData)
  },
  methods:{
    close(){
      this.showModal = false;
    }
  }
}

切记全局引入一定要是组件里公共的逻辑，因为会为每个组件扩展相应功能。

然后在main.js中引入

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

也可单文件引入：

<template>
  <div>
    <div @click="close">x</div>
    <div v-show="showModal">关闭模态框</div>
  </div>
</template>

<script>
  import mixin from "./mixin";
  export default {
    mixins:[mixin]
  }
</script>

当全局引入mixin时使用的是Vue.mixin(mixin);而单文件引入时使用的是mixins:[mixin]，有一个”s“的差别，别忘记写。