vue mixins混入

mixins文件
混入规则  ： 
1、    数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

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

3、   同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
　　　 所以即使你在引用的组件中 把created重写 也是被合并(两个都会执行) 因为合并的策略不同 导致了 methods 可以被重写 而created ready等只会被合并

const myMixin = {
    data(){
        return{
            mixinsText:"这是数据对象",     //在组件中可以被覆盖
        }
    },
    created() {
        let option = this.$options.doNotInit;    //可根据组件的在自定义选项判断是否需要执行hello函数
        console.log(option);
        if(option){
            this.hello()  
        }
                        
    },
    methods:{
        hello(){
            console.log('这是来自mixins的测试');
        }
    }
};

export default myMixin;

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

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import mixin from './mixins'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  mixins:[mixin],    //方法全局混入
  render: h => h(App)
}).$mount('#app')