混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
举个例子
子组件 A
<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>
复制代码
子组件 B
<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 和组件的选项冲突了怎么办呢？
选项合并
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
这边就只列举 data 选项
子组件 A
<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 是冲突的并且以组件的为准。
如若转载，请注明出处：开源字节 https://sourcebyte.cn/article/158.html
评论