vue中mixin的使用方法（vue mixins使用）

目录：官方的解释：mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。说白一点就是可以用来复用的一些功能；那我们就来看看是怎么使用的吧！

首先新建一个mixin.js的文件

// 定义一个混入对象
export const myMixin = {
  data () {
    return {
      text: 'hello mixin'
    }
  },
  created: function () {
    console.log(this.mallText)
  },
  methods: {
    helloMixin () {
      console.log(this.text)
    }
  }
}

然后在需要的组件中引入即可使用

<template>
    <div>
      <button @click="helloMixin">myMixin</button>
    </div>
</template>

<script>
import { myMixin } from '../../mixins/index'
export default {
  name: 'mall',
  mixins: [myMixin],
  components: {

  },
  props: {

  },
  data () {
    return {
      mallText: '我是组件'
    }
  },
  methods: {

  },
  computed: {

  },
  watch: {

  },
  created () {

  }
}
</script>

<style scoped lang="less">

</style>

注意点：1.在组件中引入的时候需要与mixin.js中的myMixin名字一致；2.组件可以使用mixin.js 的数据及方法；反之mixin.js也可以使用组件中的数据；所以不想被其使用的话；在命名的使用的时候就需要注意一下以免导致错误发生；

如果有什么不对的地方；欢迎大家补充；相互学习、共勉之