vue-mixin

基础

• 一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

myMixin

// 定义一个`mixin`对象
const myMixin = {
  created() {
    this.hello()
  },
  methods: {
    hello() {
      console.log('hello')
    }
  }
}

实例

// 使用`mixins`在实例中混入

export default {
  mixins: [myMixin]
}

// hello

选项合并

• 当有相同的属性或方法重名时，会以组件自身的优先。

myMixin

const myMixin = {
  data() {
    return {
      foo: 'foo'
    }
  },
  created() {
    this.hello()
    this.logFoo()
  },
  methods: {
    hello() {
      console.log('hello')
    },
    logFoo() {
      console.log(this.foo)
    }
  }
}

component

export default {
  mixins: [myMixin],
  data() {
    return {
      foo: 'bar'
    }
  },
  methods: {
    hello() {
      console.log('goodbye')
    }
  }
}

// goodbye
// bar

• 同名钩子函数将合并为一个数组，因此都将被调用。
• mixin 对象的钩子将在组件自身钩子之前调用。

`mixin`
const myMixin = {
  created() {
    console.log('mixin 对象的钩子被调用')
  }
}

`component`
const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('组件钩子被调用')
  }
})

// "mixin 对象的钩子被调用"
// "组件钩子被调用"