Vue中mixin的用法详解

mixin：混入，提供了一种非常灵活的方式，来开发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

引用例子（局部混入）：

目录结构：

//mixin.js文件
export default {
    data(){
        return {
            name: 'mixin'
        }
    },
    created: function(){
        this.hello()
    },
    methods: {
        hello: () =>{
            console.log('hello from mixin!');
        }
    }
}

//helloWorld组件引用
<template>
  <p>这是文字</p>
</template>

<script>
import mixin from '@/views/common/mixin'
export default {
  mixins: [mixin]
}
</script>

结果

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"