vue3 + ts 自定义属性

在Vue 3和TypeScript中，你可以通过在组件中使用装饰器或者使用接口来定义自定义属性。

使用装饰器的方法如下：

1. 首先，你需要确保你的项目已经配置了TypeScript。
2. 在组件的属性声明前加上`@Prop`装饰器，并指定属性的类型，例如`@Prop(String)`。
3. 在组件类中可以直接访问这个属性。

示例代码如下：

<template>
  <div>{{ customProp }}</div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { Prop } from 'vue-property-decorator';

@Options({
  name: 'MyComponent'
})
export default class MyComponent extends Vue {
  @Prop(String) customProp!: string;
}
</script>

另一种方法是使用接口来定义自定义属性：

1. 在组件中定义一个接口来描述属性的类型，并在组件类中实现这个接口。
2. 在组件类中可以直接访问这个属性。

示例代码如下：

<template>
  <div>{{ customProp }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface CustomProps {
  customProp: string;
}

export default defineComponent({
  props: {
    customProp: {
      type: String,
      required: true
    }
  },
  data() {
    return {};
  },
  computed: {},
  methods: {},
});
</script>

这两种方法可以根据你的需求选择其中之一来定义和使用自定义属性。希望对你有所帮助！如有任何问题，请随时问我。