Vue的mixin混入

mixin混入可以将组件公共的配置项提取出来，封装成一个混入对象

1. 封装混入对象

   // 新建一个mixins.js文件
   export const hunru1 = {
   	methods: {
   		show() {
   			console.log('123');
   		}
   	},
   	mounted() {
   		console.log('挂载完成');
   	}
   }
   export const hunru2 = {
   	data() {
   		return {
   			x: 100,
   			y: 200
   		}
   	}
   }
   

2. 使用混入

   ① 局部混入

   <template>
   	<div>
   		<button @click="show">点我调用混入中的show函数</button>
   		<p>{{name}}---{{x}}---{{y}}</p>
   	</div>
   </template>
   <script>
   	import { hunru1, hunru2} from '@/mixins.js'
   	export default {
   		data() {
   			return {
   				name: 'wuwu'
   			}
   		},
   		mixins: [hunru1, hunru2]
   	}
   </script>
   

   ② 全局混入
   【在main.js中全局混入之后，所有的组件都拥有混入的配置项】

   import Vue from 'vue';
   import { hunru1, hunru2 } from '@/mixins.js'
   Vue.mixin(hunru1);
   Vue.mixin(hunru2);
   

3. 注意事项
   ① 组件自身的data、methods…优先级比混入过来的高
   ② 组件自身的生命周期钩子和混入过来的不冲突，两者都会被执行