Vue 中 extend、extends、minxin 和 minxins 的用法和区别

2024-02-18 08:00:25

在 Vue 中，有四种方法可以创建和扩展组件：extend、extends、minxin 和 minxins。这四种方法各有其用途，但它们也有很多相似之处。

extend

Vue.extend() 是一个全局的 API，它可以创建一个新的 Vue 构造器。这个构造器可以被用来创建 Vue 实例，也可以被用来扩展其他 Vue 组件。

例如，以下代码使用 Vue.extend() 创建了一个新的 Vue 构造器：

const MyComponent = Vue.extend({
  data() {
    return {
      count: 0
    }
  },
  template: '<div>{{ count }}</div>'
})

然后，我们可以使用这个构造器来创建 Vue 实例：

const instance = new MyComponent()

也可以扩展其他 Vue 组件

const ExtendedComponent = Vue.extend({
  extends: MyComponent,
  data() {
    return {
      name: 'John Doe'
    }
  }
})

extends

extends 用于扩展另一个 Vue 组件。这意味着子组件将继承父组件的所有属性和方法。

例如，以下代码使用 extends 关键字扩展 MyComponent：

const MyExtendedComponent = {
  extends: MyComponent,
  data() {
    return {
      name: 'John Doe'
    }
  }
}

minxin

minxin 是一个特殊的 Vue 选项，它允许您向 Vue 实例或组件添加额外的属性和方法。与 extends 不同，minxin 不会继承父组件的任何属性或方法。

例如，以下代码使用 minxin 选项向 MyComponent 添加了一个新的属性和方法：

const MyMixin = {
  data() {
    return {
      name: 'John Doe'
    }
  },
  methods: {
    sayHello() {
      console.log('Hello, world!')
    }
  }
}

const MyComponent = {
  mixins: [MyMixin]
}

minxins

minxins 是一个特殊的 Vue 选项，它允许您向 Vue 实例或组件添加多个 minxin。

例如，以下代码使用 minxins 选项向 MyComponent 添加了两个 minxin：

const MyMixin1 = {
  data() {
    return {
      name: 'John Doe'
    }
  }
}

const MyMixin2 = {
  methods: {
    sayHello() {
      console.log('Hello, world!')
    }
  }
}

const MyComponent = {
  mixins: [MyMixin1, MyMixin2]
}