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混入文件中没有重名属性和方法