vue的mixins的使用
=同一个生命周期,混入对象会比组件的先执行。=
1.创建一个test.js,用export暴露出mixins对象
export const mixinsTest = {
methods:{
hello(){
console.log("hello");
}
},
created(){
this.hello()
}
}
2.在组件中引入这个mixins对象,通过mixins:[xxx],使用mixins对象
<template>
<div>
home
</div>
</template>
<script>
import {mixinsTest} from '../util/test.js'
export default {
name: "Home",
data () {
return {
};
},
created(){
console.log("home");
},
//mixins的created会先被调用,然后再执行组件的created
mixins:[mixinsTest]
}
</script>
补充:
可以混入多个mixins对象
//暴露两个mixins对象
export const mixinsTest = {
methods: {
hello() {
console.log("hello mixins");
}
},
created() {
this.hello();
},
}
export const mixinsTest2 = {
methods:{
hello2(){
console.log("hello2");
}
},
created() {
this.hello2();
},
}
组件中引入两个mixins对象
<template>
<div>
home
</div>
</template>
<script>
import {mixinsTest,mixinsTest2} from '../util/test.js'
export default {
name: "Home",
data () {
return {
};
},
created(){
console.log("1212");
},
mixins:[mixinsTest2,mixinsTest] // 先调用那个mixins对象,就先执行哪个
}
</script>
<style lang="css" scoped>
</style>
注意:
- 在要使用混入js文件中的方法或生命周期的组件中引入
import {mixinsTest} from '../util/test.js'
- 调用混入js文件中的方法要用this
<template>
<div>
home
</div>
</template>
<script>
import {mixinsTest} from '../util/test.js'
export default {
name: "Home",
data () {
return {
};
},
created(){
this.hello()
console.log("home");
},
//mixins的created会先被调用,然后再执行组件的created
mixins:[mixinsTest]
}
</script>
mixins特点
- 方法和参数在各组件中不共享
在一个组建中修改参数不会影响另一个参数 - 值为对象的选项,如methods,components等,选项会被合并,键冲突的组件会覆盖混入对象中的方法
即组件与混入对象如果存在同名方法,则混入对象中的方法将会被覆盖
与vuex的区别
vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。
与公共组件的区别
组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。
Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。
当混合里面包含异步请求函数
当混合里面包含异步请求函数,而我们又需要在组件中使用异步请求函数的返回值时,我们会取不到此返回值,如下:
mixin中:
组件中:
控制台:
undefind
解决方案:不要返回结果而是直接返回异步函数
参考这篇文章 vue中mixins的使用方法和注意点(详2)(异步请求的情况)