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

Posted 2023-02-23

【中文标题】基于类的vue组件的标签名称是啥

【英文标题】：What is the tag name of class based vue component基于类的vue组件的标签名称是什么

【发布时间】：2017-09-27 22:17:06

【问题描述】：

参考下面的链接，我们可以使用 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)
  

【参考方案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 实例。

好吧，你是对的。我现在只使用第一个，它可以工作:-)