在src目录下创建一个mixins文件夹,文件夹下新建自己要定义的混入对象js文件
// minix.js
// 定义一个混入对象
export const mixin = {
data() {
return {
num: 1
}
},
created() {
this.fun1()
this.fun2()
console.log('created mixin')
},
methods: {
fun1() {
console.log('fun1 mixin')
},
fun2() {
console.log('fun2 mixin')
},
}
}
在组件中使用
...
<script>
import {mixin} from '@/mixins/mixin.js'
export default {
mixins: [mixin]
}
</script>
特点
方法和参数在组件间不共享
例如:组件1和组件2中都引入了 minix.js
组件1 :对 num + 1 操作 --> 输出 num 的值为 2
组件2: 输出 num 的值为 1
函数:例如created() 、mounted() 等,会进行合并调用,且同名函数先执行mixin中的同名函数
...
<script>
import {mixin} from '@/mixins/mixin.js'
export default {
mixins: [mixin],
created() {
console.log('created component')
}
}
</script>
...
控制台输出结果:
created mixin
created component
对象:例如 methods,选项会被合并,键发生冲突时, 组件中的方法会覆盖mixin混入对象中的方法
...
<script>
import {mixin} from '@/mixins/mixin.js'
export default {
mixins: [mixin],
methods: {
fun1() {
console.log('fun1 component')
},
fun3() {
console.log('fun3 component')
},
}
}
</script>
...
控制台输出结果:
fun1 component
fun2 mixin
fun3 component