混入 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
上一篇下一篇

猜你喜欢

热点阅读