场景:分发 Vue 组件中的可复用功能,当一个功能在多个vue页面中使用时,就可以使用mixin来进行复用
警告:当mixin和组件的数据或者方法名冲突时,优先组件!
const Mixin = {
data () {
return {}
},
created () {
},
methods: {
hello() {
console.log('你好,我是mixin')
}
}
}
export default Mixin
import Mixin from '../mixins/Mixin.js'
export default {
name: 'index',
mixins: [Mixin ],
data () {
return {
}
},
created () {
this.hello()
}
}
import Vue from 'vue'
import App from './App'
import router from './router'
import Mixins from './mixins/mixin.js'
Vue.config.productionTip = false
Vue.mixin(Mixins)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})