混入(mixin) 提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被 "混合" 进入该组件本身的选项
例子
<template> <!-- 子组件A --> <div class="views__home__sub-model-a"></div> </template> <script> import mixin from './mixin.js'; export default { mixins: [mixin], mounted() { console.log('sub-model-a', 'mounted'); } }; </script>
<template> <!-- 子组件B --> <div class="views__home__sub-model-b"></div> </template> <script> import mixin from './mixin.js'; export default { mixins: [mixin], mounted() { console.log('sub-model-b', 'mounted'); } }; </script>
// mixin.js export default { mounted() { console.log('mixin', 'mounted'); } };
打印结果
可以看见生命周期钩子一般都是先执行mixin里面的方法,然后才到组件的方法
那么问题来了,万一 mixin 和组件的选项冲突了怎么办呢?
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行 “合并” ,发生冲突时以组件数据优先。
例子
<template> <!-- 子组件A --> <div class="views__home__sub-model-a"></div> </template> <script> import mixin from './mixin.js'; export default { mixins: [mixin], data() { return { student: { age: 20 } }; }, mounted() { console.log('sub-model-a', this.student); } }; </script>
// mixin.js export default { data() { return { student: { name: 'xiaoming', age: 10 } }; }, mounted() { console.log('mixin', this.student); } };
打印结果
可以看出来 student对象进行了合并,age时冲突的,并且以组件的为准。