mixin（vue中的混入）

最新推荐文章于 2025-05-21 11:16:39 发布

原创最新推荐文章于 2025-05-21 11:16:39 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue混入（个人理解）

vue 专栏收录该内容

3 篇文章

订阅专栏

本文深入讲解Vue中的混入(mixin)概念，阐述其在全局方法引入及组件间代码复用的作用。通过实例演示如何在main.js中定义并应用混入，实现filters等组件功能的全局共享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

混入的使用场景：在vue中需要使用全局的方法时可以考虑使用

混入的说明：

混入就是定义一个对象，这个对象就相当于vue实例，
在vue实例中可以创建的，在这个对象中可以创建，
也有生命周期等方法，以及属性，比如在这个对象中定义方法，
会自动和单个组件中的vue实例定义的方法合并，
就相当于全局的方法或者变量

混入的用法：

在main.js

const appMixin = {
	created () {
		// this 指向vue的实例，混入就有这个created方法，并且只要在vue实例中可以创建的，在这里都可以创建
		console.log(this)
		console.log(’created‘)
	},
	filters: {  // 比如定义一个全局的filters， 那这样的话，在每一个页面组件中都可以使用了
		tofix (val) {
			return val.toFixed(2)
		}
	}
}
//  然后在vue的实例中使用

// 定义全局混入 这样的意识就是在任何组件中都会具有appMixin这个对象
Vue.mixin(appMixin) 


new Vue({
	el:' #app ',
						//  mixins: [appMixin], 如果在这里添加，表示只有在当前实例中有效
	router,
	store,
	components: { App },
	template: '<App />'
})

在页面中使用通过混入定义的全局的filters

<template>
	{{ 100.252155452 |  tofix  }} //  这样这个模板就会渲染成 100.25
</template>

以上都是个人在学习中总结的，仅供参考！！！