1、写混入代码
在src文件下写好混入的代码(文件后.js),例如:
export default {
data(){
return {
num: 0
}
},
created(){
console.log('created')
},
methods:{
add(){
this.num++
}
}
}
2、引入混入
我们一般在全局引入,方便所有组件使用。即写在main.js文件中
// 全局引入混入
import mixin from './assets/a'
Vue.mixin(mixin)
局部引入写法:
import mixin from '@/assets/a.js'
export default {
name: 'Home',
data(){
return {
num: 10
}
},
mixins: [mixin],
}
引入后即可使用混入的方法和数值,
但是需要注意的是,混入的生命周期挂载先于被引入页面的生命周期挂载,所以如果本页面有相同名称的变量或者同名的方法,本能页面的会覆盖掉混入中的同名变量和方法。