vue使用ts 引入组件_（Vue起步）4.组件使用:Vue.component（props/template）

当使用 TypeScript 开发 Vue 组件时，可以使用 @Component 装饰器来定义组件。

首先需要在项目中安装 `vue-class-component` 和 `vue-property-decorator` 两个依赖。

npm install vue-class-component vue-property-decorator --save-dev

然后在组件代码中引入这两个依赖和 Vue：

import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';

接下来，使用 @Component 装饰器来定义组件，同时使用 @Prop 装饰器来定义组件的 props：

@Component({
  props: {
    propA: String,
    propB: {
      type: Number,
      default: 100
    }
  },
  template: `
    <div>
      <p>{{ propA }}</p>
      <p>{{ propB }}</p>
    </div>
  `
})
export default class MyComponent extends Vue {
  @Prop() propA!: string;
  @Prop({ default: 100 }) propB!: number;
}

在组件中使用 @Prop 装饰器定义的 props，可以在组件中直接使用 `this.propA` 和 `this.propB` 来访问。

最后，在需要使用该组件的地方，可以使用 Vue.component 来注册组件：

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

Vue.component('my-component', MyComponent);

然后在模板中使用：

<my-component prop-a="Hello" :prop-b="200"></my-component>