Vue的mixin混入

原创已于 2022-04-18 20:47:35 修改 · 365 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端框架

于 2022-04-18 20:47:13 首次发布

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue中如何通过混入（mixin）实现组件配置项的复用，详细阐述了混入对象的定义、使用方式以及数据和钩子函数的合并规则。同时，讨论了全局混入的实现及其潜在影响，提醒开发者谨慎使用以避免对所有Vue实例造成不必要的影响。

mixin 实现 Vue 组件中配置项的可复用功能。

把多个组件共用的配置提取成一个混入对象。

一个混入对象可以包含任意组件选项。

1、用法

定义混入：

创建 src/mixin.js

// 一个混入对象
export const mixin1 = {
	methods: {
		showName() {
			alert(this.name);
		},
	},
	mounted() {
		console.log('哈哈')
	},
}

// 一个混入对象
export const mixin2 = {
	data() {
		return {
			aa: 100,
			bb: 200,
		}
	},
}

使用混入：

Saaa.vue

import { mixin1, mixin2 } from '../mixin'
......

// 利用配置项 mixins
mixins: [mixin1, mixin2]

Rbbb.vue

import { mixin1, mixin2 } from '../mixin'
......

// 利用配置项 mixins
mixins: [mixin1, mixin2]

2、选项合并

当组件和混入对象含有同名选项时，

数据对象（data）在内部会进行递归合并，并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组，因此都将被调用。并且混入对象的钩子将在组件自身钩子之前调用。
值为对象的选项，例如 methods、components 和 directives
，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

3、全局混入

混入也可以进行全局注册。所有组件都可用混入的选项。

谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。

main.js

......
import { mixin1, mixin2 } from '../mixin'

Vue.mixin(mixin1)
Vue.mixin(mixin2)
......