前端混入（mixins）

一、局部混入：

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

2)、选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

①：新建minxins.js文件

一、局部混入：

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

2)、选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

①：新建minxins.js文件

②：使用组件：

//组件
import minxins  from "./common/minxins";
export default{
    mixins: [Drugs,minxins],//混入多个文件的写法
    data(){
        return{
             message:'使用混入对象的组件',
             bar:'bar',
 
        }
    },
    mounted() { 
    console.log(this.message) // 使用混入对象的组件  //发生冲突时以组件数据优先
    console.log(this.$data) //{ message: "使用混入对象的组件", foo: "foo", bar: "bar" }
  },
 
}

3）、同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

//minxins.js 文件
export default{
    data(){
        return{
            message:'混入对象',
            foo:'foo'
        }
    },
    created(){
        console.log('混入对象的钩子先被调用')
    }
}

//组件
import minxins  from "./common/minxins";
export default{
    mixins: [Drugs,minxins],//混入多个文件的写法
    data(){
        return{
             message:'使用混入对象的组件',
             bar:'bar',
 
        }
    },
    created(){
      console.log('组件钩子被调用')
    }, 
}
// 控制台结果：
// 混入对象的钩子先被调用
// 组件钩子被调用

4)、值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

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

//组件
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

注：混入对象中、组件中的方法都可互相调用；对象可互相获取；Vue.extend() 也使用同样的策略进行合并。

二、全局混入：

1）、在main.js中定义mixin，在需要的使用的页面直接使用，不需要再引入（使用方法同局部混入） 

//main.js 中
//方式一
Vue.mixin({
  data(){
    return{
      globalMix:'globalMix'
    }
  },
  methods:{
    hello(){
      console.log('hello,globalMix')
    }
  }
})
//方式二
// main.js
import mixin from '自己的文件路径/mixin';
Vue.mixin(mixin);