Vue 开发技巧（十一）

使用 Mixins：Mixins 可以让组件共享公共的代码，提高代码的复用性

// 定义 Mixin
const myMixin = {
  created() {
    console.log('Mixin 内定义的生命周期钩子')
  },
  methods: {
    mixinMethod() {
      console.log('Mixin 内定义的方法')
    }
  }
}

// 在组件内使用 Mixin
const ComponentA = {
  mixins: [myMixin],
  created() {
    console.log('组件内的生命周期钩子')
  },
  methods: {
    componentMethod() {
      console.log('组件内的方法')
    }
  }
}

// 调用 Mixin 中的方法
const vm = new Vue({
  el: '#app',
  components: {
    ComponentA
  },
  template: '<ComponentA />'
})
vm.mixinMethod()
vm.componentMethod()

定义了一个名为 myMixin 的 Mixin，包含了一个钩子函数和一个方法。然后定义了一个组件 ComponentA，并在该组件内使用了 myMixin。最后，通过 Vue 实例调用了 Mixin 中的方法和组件内的方法。