Vue 之 Mixins （混入）-CSDN博客

Mixins是一种复用Vue组件代码一种方式。

1,建立components>mixin.js,写入可复用的数据与方法

export const namexxx= {
    data () {
        isshowing: false
    },
    methods: {
        toggleShow() {
            this.isshowing = !this.isshowing
        }
    }
}

2,组件内引入并使用

// 将mixin引入该组件，就可以直接使用 toggleShow() 了
import {namexxx} from '../mixin.js'
export default {
    mixins: [namexxx],
    mounted () {
        
    }
}

3,注意

mixin的数据对象和组件的数据发生冲突时以组件数据优先。
同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。
值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。