Vue mixin的使用

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

一、局部混入：

//①：新建minxins.js文件    minxins.js   
 
export default {
    data() {
        return {
            message: '混入对象', 
        }
    },
    created() {
      this.bar() //可调用组件中的方法 也可获取组件中的对象
    },
    methods: {
        foo: function () {
            console.log('foo')
        },
        conflicting: function () {
            console.log('from mixin')
        }
    }
}

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 2. 新建一个组件 import minxins  from "./common/minxins"; export default{     mixins: [minxins],     data(){         return{              message:'使用混入对象的组件'         }     },     created(){       this.foo();       this.bar();       this.conflicting();     },     methods:{       bar() {         console.log("bar");       },     conflicting() {       console.log("from com");     },  } // 控制台结果： //bar //foo //bar //from com// 如果mixin种的data与组件中的data重复，优先使用data中的属性// 会优先执行mixin中的生命周期// methods中的方法重复的话也会依次调用

　一、全局混入：

　　main.js中

　　 1.import mixin from '自己的文件路径/mixin';

        2.Vue.mixin(mixin);