mixins文件 混入规则  ： 1、    数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。 2、   值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。 3、   同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。 　　　 所以即使你在引用的组件中 把created重写 也是被合并(两个都会执行) 因为合并的策略不同 导致了 methods 可以被重写 而created ready等只会被合并

1 const myMixin = { 2     data(){ 3         return{ 4             mixinsText:"这是数据对象",     //在组件中可以被覆盖 5         } 6     }, 7     created() { 8         let option = this.$options.doNotInit;    //可根据组件的在自定义选项判断是否需要执行hello函数 9         console.log(option);10         if(option){11             this.hello()  12         }13                         14     },15     methods:{16         hello(){17             console.log('这是来自mixins的测试');18         }19     }20 };21 22 export default myMixin;

1 import HelloWorld from "@/components/HelloWorld.vue"; 2 import TodoList from "@/components/list.vue"; 3 import vModel from "@/components/v-model.vue"; 4 import Sync from "@/components/sync.vue"; 5 import mixin from '@/mixins' 6 export default { 7   mixins:[mixin],      //局部注册 8   doNotInit:true,  //自定义选项 9   data() {10     return {11       mixinsText:'这是对混入的数据对象的覆盖',12       name: "这是父组件作用域",13       listArray: [14         { id: 1, value: "this is ad1" },15         { id: 2, value: "this is ad2" }16       ],17       textValue: "要输入的值",18       title:'这是测试sync的父组件的值'19     };20   },

 

1 import Vue from 'vue' 2 import App from './App.vue' 3 import router from './router' 4 import store from './store' 5  6 import mixin from './mixins' 7  8 Vue.config.productionTip = false 9 10 new Vue({11   router,12   store,13   mixins:[mixin],    //方法全局混入14   render: h => h(App)15 }).$mount('#app')