# 扩展和 Mixins

# 扩展

您可以像原生类继承一样扩展现有的类组件。假设您有以下超级类组件

// super.js
import Vue from 'vue'
import Component from 'vue-class-component'

// Define a super class component
@Component
export default class Super extends Vue {
  superValue = 'Hello'
}

您可以使用原生类继承语法扩展它

import Super from './super'
import Component from 'vue-class-component'

// Extending the Super class component
@Component
export default class HelloWorld extends Super {
  created() {
    console.log(this.superValue) // -> Hello
  }
}

请注意，每个超级类都必须是类组件。换句话说，它需要继承 Vue 构造函数作为祖先，并用 @Component 装饰器装饰。

# Mixins

Vue 类组件提供 mixins 辅助函数来使用 mixins 以类样式的方式。通过使用 mixins 辅助函数，TypeScript 可以推断 mixin 类型并在组件类型上继承它们。

声明 mixins Hello 和 World 的示例

// mixins.js
import Vue from 'vue'
import Component from 'vue-class-component'

// You can declare mixins as the same style as components.
@Component
export class Hello extends Vue {
  hello = 'Hello'
}

@Component
export class World extends Vue {
  world = 'World'
}

在类样式组件中使用它们

import Component, { mixins } from 'vue-class-component'
import { Hello, World } from './mixins'

// Use `mixins` helper function instead of `Vue`.
// `mixins` can receive any number of arguments.
@Component
export class HelloWorld extends mixins(Hello, World) {
  created () {
    console.log(this.hello + ' ' + this.world + '!') // -> Hello World!
  }
}

与超级类一样，所有 mixins 都必须声明为类组件。

← 自定义装饰器类组件的注意事项 →