Question

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

例如，下面的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/

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

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

1 个答案: