Vue3+ts，添加方法的原型方法

在 Vue3 和 TypeScript 中，可以通过定义类的原型方法来添加方法。假设我们要添加一个名为 `myMethod` 的方法：

import { defineComponent } from 'vue';

export default defineComponent({
  created() {
    this.myMethod();
  },
  methods: {
    // 其他方法
  }
});

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    myMethod(): void;
  }
}

// 在组件外部定义原型方法
Object.defineProperty(Vue.prototype, 'myMethod', {
  value() {
    console.log('myMethod');
  }
});

在上面的代码中，我们首先在组件中调用了 `this.myMethod()`，然后在组件外部使用 `Object.defineProperty` 定义了 `myMethod` 方法的原型。需要注意的是，在 TypeScript 中，我们需要使用 `declare module '@vue/runtime-core'` 来扩展 `ComponentCustomProperties` 接口，以便在组件中使用 `this.myMethod()` 时不会报错。

相关问题

Vue3+ts+setup，添加方法的原型链方法

在3 中，可以使用 `provide` 和 `inject` API 来实现类似于 Vue2 中 `Vue.prototype` 的功能。具体实现步骤如下：

1. 在 `main.ts` 中定义一个 `provide` 函数，将需要添加到原型链上的方法作为参数传入：

   import { createApp } from 'vue';
   import App from './App.vue';
   
   const app = createApp(App);
   
   app.provide('myMethod', (msg: string) => {
     console.log(msg);
   });
   
   app.mount('#app');

2. 在需要使用该方法的组件中，使用 `inject` API 将该方法注入到组件中：

   import { defineComponent, inject } from 'vue';
   
   export default defineComponent({
     setup() {
       const myMethod = inject('myMethod');
   
       // 使用 myMethod 方法
       myMethod('Hello World!');
     }
   });

这样就可以将需要添加到原型链中的方法添加到 Vue 实例中，从而在组件中使用该方法了。需要注意的是，由于 TypeScript 的类型检查，需要在 provide 和 inject 中指定方法的类型。

在vue3+ts使用原型

Vue 3 的组件实例是通过 `createApp` 函数创建的。在 Vue 3 中，可以通过 `app.config.globalProperties` 来设置全局属性和方法，类似于 Vue 2 中的原型。

以下是一个在 Vue 3 + 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` 调用全局方法。

请注意，使用全局属性和方法需要谨慎，因为它们在所有组件中都可用，可能会导致命名冲突或不易维护的问题。如果可能，最好将属性和方法封装在单独的模块中，并在需要时进行导入和使用。