混入的变量或方法会先加载,如果在实例或者模板中重新定义了该变量,会覆盖该变量
1、局部混入,只能在进入定义该变量的文件才具有该变量或方法
新建test.js文件,用来存放需要混入的变量
export default {
data() {
return {
title: '哈哈'
}
}
}
在vue文件中的JavaScript代码中引入test.js文件
<script>
import testMixins from './mixins/test'
export default {
mixins: [testMixins], // 局部混入
}
</script>
2、全局混入
在main.js文件中添加,可以在任意一个vue组件中使用
Vue.mixin({
return {
title:'哈哈'
}
})
注意:如果在组件中含有混入的同名变量,混入的变量将会被组件中包含的变量覆盖,
如果混入了钩子函数,钩子函数会先执行,且不会被覆盖,如果组件中包含多个组件,混入的钩子函数将会执行多次