7, mixin

83 阅读1分钟

目的: 分发 Vue 组件中的可复用功能,可以包含任意组件选项

const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello from mixin!')
    }
  }
}

选项合并

data: 都将调用,结果合并,冲突时,默认取组件的值

同名钩子函数: 合并为一个数组,都将被调用, mixin在组件钩子前面

值为对象的选项:eg: methodscomponents 和 directives, 合并,冲突时,组件对象的键值对

全局mixin

mixin合并策略: optionMergeStrategies

不足:

  • Mixin 很容易发生冲突:因为每个 mixin 的 property 都被合并到同一个组件中,所以为了避免 property 名冲突,你仍然需要了解其他每个特性。
  • 可重用性是有限的:我们不能向 mixin 传递任何参数来改变它的逻辑,这降低了它们在抽象逻辑方面的灵活性。