将多个组件间公共的内容提取出来，再分别引入
创建子组件Student
<template>
<div class="school">
<el-button @click="showName">点我弹出名称</el-button>
</div>
</template>
<script>
import {mixin} from '@/util/mixin.js'
export default {
name: 'Student',
data () {
return {
name: 'Tom'
}
},
mixins: [mixin]
}
</script>
创建子组件School
<template>
<div class="school">
<el-button @click="showName">点我弹出名称</el-button>
</div>
</template>
<script>
import {mixin} from '@/util/mixin.js'
export default {
name: 'School',
data () {
return {
name: 'XXX大学'
}
},
mixins: [mixin]
}
</script>
在util目录下创建mixin文件
export const mixin = {
methods: {
showName () {
alert(this.name)
}
}
}
创建父组件
<template>
<div class="mixin">
<Student/>
<School/>
</div>
</template>
<script>
import School from './School.vue'
import Student from './Student.vue'
export default {
components: { Student, School }
}
</script>
