首页vue3 ts 面向对象实现一个demo

vue3 ts 面向对象实现一个demo

时间: 2024-11-22 11:46:10 浏览: 58

在 Vue3 中结合 TypeScript 使用面向对象的方式创建组件示例，首先你需要确保已安装 Vue 和 TypeScript。下面是一个简单的Vue组件的TS定义： ```typescript // 定义一个名为HelloWorld的Component接口 interface HelloWorldProps { name?: string; } // 创建一个Vue组件类，继承自Vue，并实现HelloWorldProps接口 class HelloWorld extends Vue<HelloWorldProps> { // 组件的data属性，这里是name的默认值 data() { return { name: 'World' }; } // 指定模板中的内容 template: `<div>Hello {{ name }}</div>`; // 处理方法，这里是个简单的方法示例 sayHello() { this.name = `Hello, ${this.$props.name}`; } } export default HelloWorld; ``` 在这个例子中，`HelloWorld`组件接受一个名为`name`的可选属性，然后在模板中显示欢迎信息。通过继承`Vue`并实现`PropsData`接口，我们可以在TypeScript中获得更强的类型检查。使用这个组件的方式如下： ```html <template> <HelloWorld :name="user" @sayHello="handleSayHello"/> </template> <script lang="ts"> import HelloWorld from '@/components/HelloWorld.vue'; export default { components: { HelloWorld, }, methods: { handleSayHello() { this.$refs.helloWorld.sayHello(); }, }, }; </script> ```

阅读全文