先阅读vue的官网:https://cn.vuejs.org/v2/guide/mixins.html
Mixins
Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。
mixins就是混入。一个混入对象可以包含任意组件选项。
什么时候使用Mixins
- 页面的风格不用,但是执行的方法和需要的数据类似,我们是选择每个都写呢还是提取出公共部分呢?
以vue-cli创建的项目为例,可以这样写:
- mixin.js
export const circleSwiper = {
data() {
return {
msg : 'hello',
isshowing: false
}
},
activated() {
},
methods: {
toggleShow () {
this.isshowing = !this.isshowing
}
}
}
- 将mixin.js引入改组件,就可以直接使用toggleShow 方法了,在modal.vue中:
import {circleSwiper} from '@/assets/js/mixins.js'
export default {
mixins: [circleSwiper],
mounted () {
}
}
当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。
mixin的数据对象和组件的数据发生冲突时以组件数据优先。