將多個(gè)組件間公共的內(nèi)容提取出來萍鲸，再分別引入
創(chuàng)建子組件Student
<template>
<div class="school">
<el-button @click="showName">點(diǎn)我彈出名稱</el-button>
</div>
</template>
<script>
import {mixin} from '@/util/mixin.js'
export default {
name: 'Student',
data () {
return {
name: 'Tom'
}
},
mixins: [mixin]
}
</script>
創(chuàng)建子組件School
<template>
<div class="school">
<el-button @click="showName">點(diǎn)我彈出名稱</el-button>
</div>
</template>
<script>
import {mixin} from '@/util/mixin.js'
export default {
name: 'School',
data () {
return {
name: 'XXX大學(xué)'
}
},
mixins: [mixin]
}
</script>
在util目錄下創(chuàng)建mixin文件
export const mixin = {
methods: {
showName () {
alert(this.name)
}
}
}
創(chuàng)建父組件
<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>
