vue 使用混入mixin

最新推荐文章于 2025-03-01 18:21:10 发布

little达

最新推荐文章于 2025-03-01 18:21:10 发布

阅读量364

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/tttddd888/article/details/124734280

版权

本文介绍了如何在Vue.js中使用混入（mixin），包括局部混入和全局混入的实现步骤。局部混入通过在components文件夹下的mixin.js文件定义并引入到特定组件中，全局混入则是在main.js文件中设置。

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

1、局部混入

1.1 componts文件夹下、新建mixin.js文件(或者新建mixin文件夹，里边包含多种定义的混入方法)

// 定义mixins
const mixin ={
	data(){
		return:{
			data:"mixins使用",
			message:"方法2信息"
		}
	},
	methods:{
		testMixin(){
			console.log("混入方法测试111", this.data);
		},
		tsetTwo(){
			console.log("混入方法22222", this.message);
		},
	}
}
// 导出mixins
export default mixin

1.2 需要使用mixins的页面

// 方法一
// 引入 mixin
import mixin from '@components/mixins'
// 方法二
//import {mixin文件里的各种方法} from '@components/mixin'
export default {
	mixins: [ mixin ],
	//mixins: [ mixin文件里的各种方法],
	data(){
		return:{
			data:"mixins使用",
			message:"方法2信息"
		}
	},
	cteated(){
		this.testMixin()
	}
}

2、全局使用

main.js文件


// 全局定义
Vue.mixin({
	data() {
		return {
			message: '全局使用'
		}
	},
	methods: {
		mixinInApp() {
			alert(this.message)
		}
	}
})

// 组件中使用直接this.mixinInApp()