定义
mixins(混入):一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins 是一个 js 对象,它可以包含我们组件script中的任意功能选项,如:data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中,当组件使用 mixins 对象,所有 mixins 对象的选项都将被扩展到该组件本身的选项中来,这样就可以提高代码的重用性,并易于后期的代码维护。
用法
在src文件夹下创建mixins文件夹,再在文件夹中创建js文件
export default {
// 此处编写的就是 Vue组件实例的 配置项,通过一定语法,可以直接混入到组件内部
// data methods computed 生命周期函数 ...
created () {
console.log('嘎嘎')
},
data () {
return {
title: '标题'
}
},
methods: {
sayHi () {
console.log('你好')
}
}
}
在vue文件中导入
import loginConfirm from '@/mixins/loginConfirm'
export default {
mixins: [loginConfirm,...]//可以混入多个,后面的优先级更高,会覆盖前面的
}
这样js文件里的数据和方法就混入到了对应的vue文件中
调用
this.title
this.sayHi()
注意点:
1. 如果导入的mixins的js文件 和 组件内,提供了同名的 data 或 methods, 则组件内优先级更高
2. 如果编写了生命周期函数,则mixins中的生命周期函数 和 页面的生命周期函数,会用数组管理,统一执行,不会冲突