vue mixin混入

十一个月

已于 2022-05-31 20:04:15 修改

阅读量87

点赞数

文章标签： vue.js 前端

于 2022-05-31 20:02:05 首次发布

本文链接：https://blog.youkuaiyun.com/kkmmtb/article/details/125072314

版权

本文介绍了Vue.js中的混入（mixin）功能，用于复用组件间的公共配置。首先创建了一个名为mixin.js的文件，定义了data和methods，然后通过全局或局部方式引入混入对象。全局引入可在所有Vue实例中使用，局部引入则只在特定组件生效。通过混入，可以有效地提高代码的复用性和组织性。

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

混入的功能：可以把多个组件共用的配置提取成一个混入对象
1.新建一个mixin.js文件（名字可以自定义）

//这里采用的分别暴露
export const mixin={
	data:{
		name:"kks",
		age:"19"
	},
	methods:{
		sayHello(){
		console.log("hello world");
		}
	}
}

2.引入

//全局引入，让所有的vue文件都能使用，在main.js中引入
import {mixin} from './mixin.js'
Vue.mixin(mixin);

//局部引入 
//引入分别暴露
<template>
	<div>
		<button @click="sayHello">点击输出hello world</button>
		<h3>{{name}}-{{age}}</h3>
	</div>
</template>
<script>
	import {mixin} from './mixin.js'
	export default{
		mixins:[mixin]
	}
</script>
<style>
</style>