vue mixins混入的使用
什么是mixins?
mixins(混入),官方的描述是一种分发Vue 组件中可复用功能的非常灵活的一种方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中,当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来,这样就可以提高代码的重用性.
什么时候使用mixins?
当我们存在多个组件中的数据或者功能很相近时,我们就可以利用mixins将公共部分提取出来,通过 mixins封装的函数,组件调用他们是不会改变函数作用域外部的。
如何创建mixins?
创建路径:@/mixins/index.js mixins是一个js对象,所以以对象的形式来定义index.js,在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性,并通过export导出该对象
export const myMixins={
components:{},
data(){
return{}
},
created(){},
mounted(){},
computed:{},
methods:{}
}
如何使用mixins?
在需要调用的组件中引入myMixins.js文件,然后在export default 中引入你需要的对象即可
in component:
<script>
import {myMixins} from '@/mixins'
export default{
mixins:[myMixins]
}
</script>
mixins的特点
方法和参数在各组件中不共享,虽然组件调用了mixins并将其属性合并到自身组件中来了,但是其属性只会被当前组件所识别并不会被共享,也就是其他组件无法从当前组件中获取到mixins中的数据和方法。
mixins合并冲突
值为对象(components、methods 、computed、data)的选项,混入组件时选项会被合并,键冲突时优先组件,组件中的键会覆盖混入对象的,值为函数(created、mounted)的选项,混入组件时选项会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用
与vuex的区别
**vuex:**用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。
**Mixins:**可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。
与公共组件的区别
组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。
**Mixins:**则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。