vue mixins混入

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')

 

 

转载于:https://www.cnblogs.com/cuikaitong/p/9668607.html