当前位置: 首页 > 知识库问答 >
问题:

Vue JS typescript组件找不到注入实例属性

宋华美
2023-03-14

我正在使用typecript和vue。

在我的应用程序中有一个服务,它对每个子组件都是全局的。

我在vue JS上找到了本机vue解决方案,将此属性注入子组件。

在main.ts

const service = new MyService(...);

new Vue({
  router,
  provide() { return { service }; } // provide the service to be injected
  render: h => h(App),
}).$mount("#app");

在任何typescript vue组件上

import Vue from "vue";

export default Vue.extend({
  inject: ["service"], // inject the service
  mounted() {
    console.log(this.service); // this.service does exists 
  },
});

这样我就可以在我的子组件上获得注入的服务。

然而我得到了Hibernate错误

属性“service”不存在于类型“组合VueInstance”上

如何解决这个打字稿编译错误?


共有3个答案

江烨伟
2023-03-14

为注入创建一个接口,并在需要的地方扩展特定组件的Vue:

主要的ts:

const service = new MyService(...);

export interface ServiceInjection {
  service: MyService;
}

new Vue({
  router,
  provide(): ServiceInjection { return { service }; } // provide the service to be injected
  render: h => h(App),
}).$mount("#app");

使用您的接口的组件

import Vue from "vue";
import { ServiceInjection } from 'main.ts';

export default ( Vue as VueConstructor<Vue & ServiceInjection> ).extend({
  inject: ["service"], // inject the service
  mounted() {
    console.log(this.service); // this.service does exists 
  },
});
越风史
2023-03-14

您不需要使用类组件来实现这一点。对于对象组件声明,有两种方法:

export default {
  inject: ['myInjection'],
  data(): { myInjection?: MyInjection } {
    return {}
  },
}

缺点是您必须将其标记为可选才能将其添加为数据返回。

declare module 'vue/types/vue' {
  interface Vue {
    myInjection: MyInjection
  }
}

export default {
  inject: ['myInjection'],
}
齐才艺
2023-03-14

如果您想在所有Vue组件中使用某些服务,您可以尝试使用插件。
在main.ts您只需导入它:

import Vue from "vue";
import "@/plugins/myService";

plugins/myService.ts中,您必须编写如下内容:

import _Vue from "vue";
import MyService from "@/services/MyService";

export default function MyServicePlugin(Vue: typeof _Vue, options?: any): void {
    Vue.prototype.$myService = new MyService(...); // you can import 'service' from other place
}

_Vue.use(MyServicePlugin);

在任何vue组件中,您都可以使用它:

<template>
  <div> {{ $myService.name }}</div>
</template>
<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";

  @Component
  export default class MyComponent extends Vue {
    private created() {
      const some = this.$myService.getStuff();
    }
  }
</script>

不要忘记在d.ts文件中声明$myService。在项目的某个地方添加文件myService。d、 ts包含以下内容:

import MyService from "@/services/MyService";

declare module "vue/types/vue" {
  interface Vue {
      $myService: MyService;
  }
}
 类似资料:
  • 奇怪的是,即使是这种变体 我还是得到同样的错误。

  • 当我尝试将我的maven项目部署到Glassfish 5时,我得到以下错误: [[FATAL]在索引0处找不到类型为public javax.ws.rs.core.response com.test.resources.AccountResource.AddProfilePicture(java.io.inputStream,org.glassfish.jersey.media.multipart

  • 本文向大家介绍vue组件watch属性实例讲解,包括了vue组件watch属性实例讲解的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了vue组件watch属性的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 在我的Spring Boot Application中,我用一个调用存储过程的方法实现了以下类。 由于调用存储过程需要数据库连接,所以我需要从应用程序加载这些相应的属性值。特性: 基于以下关于类似问题的文章,Spring boot—应用程序中的自定义变量。属性,并在您自己的类和Spring Boot@ConfigurationProperties示例中使用Spring Boot配置属性,我为我的类

  • 我只是在用java阅读输入文件,直到我在最基本的步骤上被难住了。。。正在查找输入文件! 输入。txt文件与调用它的类文件位于同一目录中,但eclipse仍给我一个错误,即找不到它: "线程"main"中的异常java.lang.错误:未解决的编译问题:未处理的异常类型FileNotFoundException" 我的代码: 输入txt在同一个包、同一个文件夹和所有内容中。我很困惑:(

  • 我试图运行Webpack上的一个项目和我得到多个错误 我应该安装我所有的打字,所以我不知道这些是从哪里来的。我试图从一个编译的项目中复制package.json,但没有帮助。我错过了什么? 我的tConfig看起来像这样