typescript - نام تگ کامپوننت ویو مبتنی بر کلاس چیست

به لینک زیر مراجعه کنید، ما میتوانیم از کامپوننتهای 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://v2.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)
  }
}

پاسخ شماره ۱

شما هنوز هم میتوانید کامپوننتها را مانند همیشه ثبت کنید، انگار که از تایپاسکریپت استفاده نمیکنید:

// 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
  }
})