混入 mixin
2022-01-04 本文已影响0人
刘淘
混入提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
在当前文件使用了mixins: [xxx],如果你要用到mixin里的,就可以直接this.属性/方法名。
具体如下:
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
image.png
在写供应商需求的时候,包含了四个列表,设计单位、总包单位、装修单位、总包单位,其中四个列表头部查询条件几乎一样,列表中需要翻译的字段也差不多。当时需求开发的时候,写了四个不同的页面,目前看,完全可以定义一个混入文件,将共用的变量放进去。
表格翻译:
image.png