(vue extend) Vue中mixin和extends的使用方法详解 Vue 中 mixin 和 extends 的使用: 全网首发(图文详解1)

在 Vue 中，mixin 和 extends 都是用来抽象和复用组件的常用手段。当你有一些特定的功能，或者一些方法需要在多个组件之间共享的时候，就可以通过 mixin 和 extends 来实现。

接下来，我将先详解这两种方法，然后分享具体的使用以及开发的步骤。

Mixins 可以说是一种分发 Vue 组件中可复用功能的非常灵活的方式。一个 mixin 对象可以包含任何组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将会被混入到原组件本身的选项。

使用步骤如下：

（1）首先声明一个 mixin：

let myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('来自 mixin 的问候！')
    }
  }
}

（2）然后在组件中使用它：

let Component = Vue.extend({
  mixins: [myMixin]
})

这样一来，Component 就获得了 myMixin 中的 created 钩子函数和 hello 方法。

extends 是另一种复用组件代码的高级选项。它允许声明一个扩展自其他组件的组件，基本上同样可以实现 mixin 的功能，但是如果遇到同名选项，则会采用覆盖方式，子组件的优先级更高。

使用步骤如下：

（1）首先声明一个基础组件：

const base = {
  methods: {
    show: function () {
      console.log('显示')
    }
  }
}

（2）然后创建一个新组件扩展自基础组件：

let Component = Vue.extend(base)

let instance = new Component()

这样一来，instance 就获得了 base 中的 show 方法。