vue项目中使用mixin，2和3.0都适用。

1. 什么是Mixin？

想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。

其实Mixin不是Vue专属的，可以说它是一种思想，也可以说它就是混入的意思，在很多开发框架中都实现了Mixin(混入)，我们这里主要讲解的是Vue中的Mixin。

老规矩，先看官方文档。

官方解释：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

定义mixin也非常简单，它就是一个对象而已，只不过这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等等。 

在我们的项目src目录下新建mixin文件夹，然后新建index.js文件，该文件存放我们的mixin代码。

第一步：定义baseMixin.js文件

const baseMixin = {
	data() {
		return {
			title: '这个是公用标题'
		}
	},
	methods: {
		onClick() {
			console.log('我被点击了')
		}
	}
}
export default baseMixin;

可以全局使用：

import { createApp } from 'vue'
import App from './App.vue'
import baseMixin from './mixin/baseMixin'
createApp(App).mixin(baseMixin).mount('#app')

也可以在文件中引入，局部引用。

<template>
  <div class="baseMixin">
    <h1>
    	这个是调用复用标题: {{title}}
    	// 渲染：这个是公用标题
   	</h1> 
    <h2>
    	<button @click="onClick">
    		// 打印：我被点击了
    		这个是复用方法
   		</button>
    </h2>
  </div>
</template>
<script>
import baseMixin from '@/mixin/baseMixin'
	export default {
		mixins: [baseMixin],
		setup() {
			let text = '这个是vue3版本mixin的方法记录'
			return {
				text
			}
		}
	}
</script>

最后

以上就是发嗲玫瑰为你收集整理的vue项目中使用mixin，2和3.0都适用。的全部内容，希望文章能够帮你解决vue项目中使用mixin，2和3.0都适用。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。