Vue 组件 mixins

把组件相同的代码抽取出来编写成js文件使用时再引入组件 提高代码复用

例如

export const mixin = {
	methods: {
		showName(){
			alert(this.name)
		}
	}
}

<template>
	<div>
		<h2 @click="showName">学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>
<script>
	import { mixin } from '../mixin.js'
	export default {
		name: 'SchoolTest',
		data(){
			return {
				name: 'XXX',
				address: 'XXX'
			}
		},
		mixins: [mixin]	//这里是局部引入
	}
</script>

全局引入则是在入口文件（main.js）中引入

1、导入js文件
import { mixin } from "./mixin"
2、注册
Vue.mixin(mixin)