把组件相同的代码抽取出来编写成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)