基于类的vue组件的标签名称是什么

Question

参考下面的链接，我们可以使用 TypeScript 编写的基于类的 vue 组件。
使用这些自定义组件的正确方法是什么？

例如，下面的 Es5 代码定义了一个组件，它可以在其他组件的模板中使用，例如 <my-component></my-component>，因为我们将名称 'my-component' 作为 Vue.component 方法的参数。 如何在 typescript 中实现这一点？

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

Vue.component('parent-component', {
  template: '<my-component></my-component>'
})

https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components https://alligator.io/vuejs/typescript-class-components/

基于类的 Vue 组件 这个组件的标签名是什么，可以在其他组件的模板字符串中使用？

import Vue from 'vue'
import Component from 'vue-class-component'
// The @Component decorator indicates the class is a Vue component
@Component({
  // All component options are allowed in here
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // Initial data can be declared as instance properties
  message: string = 'Hello!'
  // Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}

Answer 1

您仍然可以像不使用 Typescript 一样注册组件：

// MyComponent.ts

import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  message: string = 'Hello!'
  onClick (): void {
    window.alert(this.message)
  }
}

// Register the component globally
Vue.component('my-component', MyComponent)

由于上面的代码是从模块中导出组件，你可能不应该全局注册它（除非它是一个通用组件）。最好的方法是将组件导入到将要使用它的其他组件的模块中：

// App.ts

import Vue from 'vue'
import MyComponent from './MyComponent'

new Vue({
  el: '#app',
  components: {
    MyComponent  // will register as <my-component> in #app's template
  }
})