一、什么是混入
1、是一種代碼復用的技巧
Vue組件是由若干選項組成的，向組件中混入可復用的選項。
2、作用
比如我封裝兩個組件，一個是A組件，一個是B組件，發現它里面有相同的選項，就可以用混用的方式來復用它。
二、混入方式
1、全局混入
使用Vue.mixin({選項})進行全局混入。
當前Vue程序中，所有組件都擁有了這些被混入的選項。
2、局部混入
使用mixins:[{},{}]選項，進行局部混入。
只有當前組件才有這些被混入的選項。
3、一般混入的內容是
data、methods、生命周期鉤子。
4、當一個組件同時有全局混入、局部混入、自有選項時，它們的優先級
自有選項 > 局部選項 > 全局混入
5、關于混入
注意：盡量不要用全局混入，偶爾會用到局部混入。
三、混入的缺點
1、當混入用的多了，選項來歷不明，代碼不易維護。
四、例子代碼
<html>
<head><title>混入</title><style></style>
</head>
<body><div id="app"><home-1></home-1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const aa = {data() {return {name: 'aa'}},mounted() {console.log('---mounted aa')}}const bb = {data() {return {name: 'bb'}},mounted() {console.log('---mounted bb')}}// 全局混入Vue.mixin({data() {return {version: 'v2' //所有組件都增加一個版本的變量}},methods: {maidian(id) {console.log('---調接口埋點', id)}}})Vue.component('home-1', {template:`<div>首頁{{version}}</div>`,mounted() {this.maidian(100)console.log('---name', this.name)},// 局部混入mixins:[aa, bb] })const app = new Vue({})app.$mount('#app')</script></body>
</html>
五、混入可以解決什么問題
1、注入埋點方法
埋點：你沒有調接口，它自己悄悄調接口，把你的愛好發到后臺。
2、單位的轉換方法、工具方法
3、Echarts圖表封裝
)
