在vue3+ts使用原型
时间: 2023-08-20 14:06:24 浏览: 60
Vue 3 的组件实例是通过 `createApp` 函数创建的。在 Vue 3 中,可以通过 `app.config.globalProperties` 来设置全局属性和方法,类似于 Vue 2 中的原型。
以下是一个在 Vue 3 + TypeScript 中使用原型的示例:
```typescript
import { createApp } from 'vue';
const app = createApp({});
// 设置全局属性
app.config.globalProperties.$myProperty = 'Hello World';
// 设置全局方法
app.config.globalProperties.$myMethod = (name: string) => {
console.log(`Hello, ${name}!`);
};
// 在组件中使用全局属性和方法
app.component('my-component', {
template: `
<div>
<p>{{ $myProperty }}</p>
<button @click="$myMethod('John')">Say Hello</button>
</div>
`
});
app.mount('#app');
```
在上面的示例中,我们使用 `app.config.globalProperties` 设置了一个名为 `$myProperty` 的全局属性,以及一个名为 `$myMethod` 的全局方法。然后,在组件中可以通过 `$myProperty` 直接访问全局属性,并通过 `$myMethod` 调用全局方法。
请注意,使用全局属性和方法需要谨慎,因为它们在所有组件中都可用,可能会导致命名冲突或不易维护的问题。如果可能,最好将属性和方法封装在单独的模块中,并在需要时进行导入和使用。