Vue Class 组件：如何自定义选项

Question

目前我使用带有 Typescript 的 Vue 2，但我无法向组件添加选项

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

@Component<Home>({
  components: {
    HelloWorld,
  },

  middleware: "yyy",
})
export default class Home extends Vue {
  mounted() {
    console.log(this.middleware);
  }
}
</script>

我没有定义！

我发现了1个类似的问题，试过了还是没有结果

Extend Component options

我的src\shims-vue.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
declare module "vue/types/vue" {
  interface Vue {
    middleware?: string;
  }
}

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    middleware?: string;
  }
}

Answer 1

您的类型声明缺少 Vue 的导入：

// shims-vue.d.ts
import Vue from 'vue' 

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    middleware?: string;
  }
}

要从您的组件访问该选项，请使用 this.$options.middleware（而非 this.middleware）：

export default class Home extends Vue {
  mounted() {           
    console.log(this.$options.middleware);
  }
}

Vue Class 组件：如何自定义选项

Vue Class Component: How to custom options

typescript

vue.js

vuejs2

vue-class-components