student.vue
<template>
<div class="student">
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<button @click="showName">點我顯示名字</button>
</div>
</template>
<script>
// 局部引入
import {hunhe,hunhe2} from '../mixin.js'
export default{
name:'Student',
/*data() {
return{
name:'張三',
age:18
}
},*/
mixins:[hunhe,hunhe2]
}
</script>
<style>
</style>
school.vue
<template>
<div class="school">
<h2>{{name}}</h2>
<h2>{{Add}}</h2>
<button @click="showName">點我顯示名字</button>
</div>
</template>
<script>
import {hunhe} from '../mixin.js'
export default{
name:'School',
data() {
return{
name:'老年大學',
Add:'加利福尼亞'
}
},
mixins:[hunhe]
}
</script>
<style>
</style>
export const hunhe = {
methods:{
showName(){
alert(this.name)
}
}
}
export const hunhe2 = {
data(){
return{
name:"大王",
age:18
}
}
}
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//全局引入 此時單獨的組建不需再次引入mixin.js,使用mixins
import {hunhe,hunhe2} from './mixin.js'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)
new Vue({
render: h => h(App),
}).$mount('#app')