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

Posted 2023-02-23

【中文标题】Vue 类组件：如何自定义选项

【英文标题】：Vue Class Component: How to custom options

【发布时间】：2021-09-15 10:46:20

【问题描述】：

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

<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;
  

【参考方案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);