// 定義一個mixin模塊 mixin.js
export default {
  created: function () { console.log('這里是mixin1模塊的created') }
}
// 在組件實(shí)例中引入并使用定義的mixin模塊
// 引入mixin模塊
import mixin from "../mixins/mixin";
export default {
  created: function () { console.log('這里是組件本身的created') },
  // 使用mixin模塊
  mixins: [mixin]
}

// 定義一個mixin1.js模塊
export default {
  data() {
    return {
      a: 1, // 第一個混入模塊中的變量a
      b: 11 // 第一個混入模塊中的變量b
    }
  },
}
// 定義一個mixin2.js模塊
export default {
  data() {
    return {
      a: 2, // 第二個混入模塊中的變量a
      b: 22 // 第二個混入模塊中的變量b
    }
  },
}
// 在組件實(shí)例中引入并使用定義的mixin模塊
// 引入兩個mixin模塊
import mixin1 from "../mixins/mixin1";
import mixin2 from "../mixins/mixin2";
export default {
  data() {
    return {
      b: 0, // 組件內(nèi)的變量b
    };
  },
  mounted() {
    // 組件內(nèi)不存在這個變量 兩個混入模塊存在同名變量 最終值取決于模塊引用順序
    console.log("經(jīng)過合并后變量a的值是-----", this.a);
    // 組件內(nèi)存在這個變量 最終值取組件內(nèi)的值
    console.log("經(jīng)過合并后變量b的值是-----", this.b);
  },
  // 使用兩個mixin模塊 注意先后順序 決定同名變量的最終取值
  mixins: [mixin1, mixin2],
}

// 定義一個mixin1.js模塊
export default {
  created: function () { console.log('這里是mixin1模塊的created') },
}
// 定義一個mixin2.js模塊
export default {
  created: function () { console.log('這里是mixin2模塊的created') },
  mounted: function () { console.log('這里是mixin2模塊的mounted') },
}
// 在組件實(shí)例中引入并使用定義的mixin模塊
// 引入兩個mixin模塊
import mixin1 from "../mixins/mixin1";
import mixin2 from "../mixins/mixin2";
export default {
  created() {
    console.log("這里是組件本身的created");
  },
  // 使用兩個mixin模塊 注意先后順序 決定同名鉤子函數(shù)的執(zhí)行順序
  mixins: [mixin1, mixin2],
}

// 定義一個mixin1.js模塊
export default {
    methods: {
    test() {
      console.log('這里是mixin1模塊methods中的test函數(shù)')
    },
    test1() {
      console.log('這里是mixin1模塊methods中的test1函數(shù)')
    }
  },
}
// 定義一個mixin2.js模塊
export default {
  methods: {
    // 如果mixin模塊之間存在鍵名沖突 則以組件中mixin數(shù)組的引用順序?yàn)闇?zhǔn)
    // 取排序最后的鍵名對應(yīng)的值
    test1() {
      console.log('這里是mixin2模塊methods中的test1函數(shù)')
    }
  },
}
// 在組件實(shí)例中引入并使用定義的mixin模塊
// 引入兩個mixin模塊
import mixin1 from "../mixins/mixin1";
import mixin2 from "../mixins/mixin2";
export default {
  mounted() {
    this.test();
    this.test1();
  },
  // 使用兩個mixin模塊 注意先后順序 決定鍵名沖突的最終結(jié)果
  mixins: [mixin1, mixin2],
  methods: {
    // 如果mixin模塊與組件本身鍵名沖突 則以組件為最終結(jié)果
    test() {
      console.log("這里是組件本身methods中的test函數(shù)");
    },
  },
}

// 定義一個allmixin.js 模塊
export default {
  created: function () { console.log('這里是全局mixin模塊的created') },
  methods: {
    test() {
      console.log('這里是全局mixin模塊methods中的test函數(shù)')
    }
  },
}
// 在main.js中引入并進(jìn)行全局混入
import Vue from 'vue'
import App from './App.vue'
import allMixin from './mixins/allMixin'
// 一定要在 new Vue 之前  否則不起作用
Vue.mixin(allMixin)
// 創(chuàng)建全局Vue實(shí)例
new Vue({
  render: h => h(App),
}).$mount('#app')
// 此時的頁面結(jié)構(gòu)
// mian.js的new Vue -> APP.vue -> test.vue

// 定義一個allmixin.js 模塊
export default {
  created: function () {
    // 自定義選項 并接收傳遞的值
    const myOptionValue = this.$options.myOption
    // 輸出傳遞的值
    if (myOptionValue) {
      console.log('-*------', myOptionValue)
    }
  },
}
// 在main.js中引入并進(jìn)行全局混入
import Vue from 'vue'
import App from './App.vue'
import allMixin from './mixins/allMixin'
// 一定要在 new Vue 之前  否則不起作用
Vue.mixin(allMixin)
// 創(chuàng)建全局Vue實(shí)例
new Vue({
  render: h => h(App),
}).$mount('#app')
// 在組件使用全局混入中自定義的選項
export default {
    data() {
        return {}
    },
    // 使用自定義選項
    myOption: "這是我向自定義選項傳遞的字符串",
}

// 自定義合并邏輯
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
}
// 或者
// 采用現(xiàn)有邏輯 與methods相同
Vue.config.optionMergeStrategies.myOption = Vue.config.optionMergeStrategies.methods

// provide 的選項值為一個對象
export default {
    data() {
        return {}
    },
    provide: {
        a: "這是祖先組件向后代組件傳遞的字符串?dāng)?shù)據(jù)",
    	b: {
      		c: "這是祖先組件向后代組件傳遞的對象數(shù)據(jù)",
    	},
    	f: function () {
      		console.log("這是祖先組件向后代組件傳遞的函數(shù)數(shù)據(jù)");
    	},
    },
}
// provide 的選項值為一個返回值為對象的函數(shù)
export default {
    data() {
        return {}
    },
    provide() {
    	return {
      		 a: "這是祖先組件向后代組件傳遞的字符串?dāng)?shù)據(jù)",
        	 b: {
          	 	c: "這是祖先組件向后代組件傳遞的對象數(shù)據(jù)",
        	 },
        	 f: function () {
          	 	console.log("這是祖先組件向后代組件傳遞的函數(shù)數(shù)據(jù)");
        	 },
    	  };
  	  },
}

// inject 的選項值為一個字符串?dāng)?shù)組（推薦）
export default {
    data() {
        return {}
    },
	inject: ["a", "b", "f"],
}
// inject 的選項值為一個對象（不推薦）
export default {
    data() {
        return {}
    },
	inject: {
    	a: "a",
    	b: "b",
    	f: "f",
  	},
}
// 在后代組件中通過inject接收傳遞的數(shù)據(jù)之后 調(diào)用傳遞的數(shù)據(jù)
mounted() {
    console.log("inject接收的祖先組件傳遞過來的字符串?dāng)?shù)據(jù)-----", this.a);
    console.log("inject接收的祖先組件傳遞過來的對象數(shù)據(jù)-----", this.b);
    console.log("inject接收的祖先組件傳遞過來的函數(shù)數(shù)據(jù)-----", this.f);
},

export default {
    inject: ['foo'],
    props: {
      a: {
          default() {
              return this.foo
          }
      }
    },
    data() {
        return {
            b: this.foo
        }
    },
}

export default {
    inject: {
        // 當(dāng)組件內(nèi)名稱與祖先組件的key相同時，可省略form屬性
    	foo: { default: 'foo' },
        // 當(dāng)組件內(nèi)名稱與祖先組件的key不同時，需要通過form屬性指定對應(yīng)的數(shù)據(jù)
        bar: {
            from: 'barFather',
            default: 'bar'
        },
        // 對復(fù)雜數(shù)據(jù)類型使用一個工廠方法
        arr: {
            from: 'arr',
            default: () => [1, 2, 3]
        },
  	},
    data() {
        return {}
    },
}