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