如何使用Vue Class组件访问VueJS 3中的HTML和Typescript？

npm install vue@next vue-class-component@next

import { Vue, Component } from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
  // 组件逻辑和数据
}

import { Vue, Component, Prop, Watch, Emit } from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
  @Prop() propValue!: string;

  @Watch('propValue')
  onPropValueChanged(newValue: string, oldValue: string) {
    // 监听属性变化的逻辑
  }

  @Emit()
  customEvent() {
    // 触发自定义事件的逻辑
  }
}

<template>
  <div>
    <h1>{{ propValue }}</h1>
    <button @click="customEvent">Click me</button>
  </div>
</template>

import { createApp } from 'vue';
import MyComponent from './MyComponent.vue';

const app = createApp();
app.component('my-component', MyComponent);
app.mount('#app');

<div id="app">
  <my-component prop-value="Hello Vue"></my-component>
</div>