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

Question

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

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

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/

Class-基于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
  }
})

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

What is the tag name of class based vue component

typescript

vue.js

vue-component

vuejs2