VUE框架深入——掌握mixins混入

一、mixins是什么？

mixins（混入）是一种分发Vue组件中可复用功能的非常灵活的一种方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

二、使用步骤

1.创建mixins模板

创建一个js文件，命名为initCos.js

代码如下（示例）：

export const initCos = {
    data() {
        return {
            getCosUrl: '/cos/getCosKey'
        }
    },
    methods: {
        createCos(code) {
            var COS = require('cos-js-sdk-v5')
            if (code === 1) {
                getAction(this.getCosUrl, {
                        modelName: code
                    }).then((res) => {
                        debugger

                    })
            }
        }
    }
}

2.在需要的页面引用

代码如下（示例）：

import { initCos } from '@/mixins/initCos'
export default {
mixins: [initCos],
}

3.调用mixins中的方法

this.createCos()

4.使用注意事项

1.在vue页面有的方法会覆盖mixins混入中的方法
2.在vue页面中的data状态会覆盖mixins混入中的data
3.在mixins混入的js文件中可以调用vue的属性和方法，前提是mixins混入文件中没有重名属性和方法

总结

good afternoon