[JavaScript知识库]Vue自定插件的简单示例(ts)

参考资料

• https://stackoverflow.com/questions/60572618/vue-typescript-plugin
• https://stackoverflow.com/questions/51469620/why-doesnt-typescript-recognize-module-augmentation-for-a-vue-plugin

编写插件内容

// plugin.ts
import Vue from "vue";

export const sayhellowPlugin = {
  install: (vue: typeof Vue, options: any): void => {
    vue.prototype.sayhellow = function (params: any) {
      console.log((this as any).vueprop);
      console.log(options.text + params);
    };
  },
};

declare module "vue/types/vue" {
  interface Vue {
    sayhellow: (text: string) => void;
  }
}

在main里引用

// main.ts
import { sayhellowPlugin } from "@/components/plugin";

Vue.use(sayhellowPlugin, { text: "hellow??" });

在vue文件里测试

// test.vue
private vueprop = "this is vue";

private mounted() {
  this.sayhellow("world");
}

结果