标签: vue-class-components

我想将我的 vuejs 项目升级到基于类组件的打字稿，但我在 vue 问题的https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121 中阅读：

更新：Class API 提案正在被删除。

那么现有的基于类组件的项目会发生什么？更重要的是，基于这篇文章： https://alligator.io/vuejs/using-typescript-with-vue/其说

由于我们没有使用类样式语法，因此您可以使用 as 关键字将数据声明为数据类型。

这种在 vue3.0 中使用 typescript 的方式安全吗？

嗨，我正在使用带有 Typescript 和类组件的 Vue 3。我只是从文档中复制粘贴了示例，但看起来 Typescript 存在问题：

TS1238: Unable to resolve signature of class decorator when called as an expression.
  This expression is not callable.
    Type 'typeof import(".../node_modules/vue-class-component/dist/vue-class-component")' has no call signatures.

TS2507: Type 'typeof import(".../node_modules/vue/dist/vue")' is not a constructor function type.

文档：https : //class-component.vuejs.org/guide/class-component.html

有人知道缺少什么吗？谢谢！

我想知道我应该为 Vue 类中的属性和方法使用哪些修饰符？（我使用vue-class-component包）。public, private, protected?

或者我应该关闭说我需要设置访问修饰符的 linter 规则？

这是一个示例组件：

@Component({
  components: { MyChildComponent }
})
export default class MyComponent extends Vue {
  // props
  @Prop({ type: String, default: '' }) public readonly value!: string
  @Prop({ type: Array, default: () => [] }) public readonly myProp1!: any
  @Prop({ 
    type: [Array, Object], 
    default: () => ({}) 
  }) public readonly myProp2!: any

  // data variables
  public myVar1: MyClass | null = null
  public myVar2: boolean = false …

我在我的 TypeScript 组件文件中收到一个错误，指出 prop 不存在，但我完全按照vue-class-component文档示例中的描述声明了 prop 。

Property 'propMessage' does not exist on type 'MyComponent'.Vetur(2339)

我该如何解决？

是否有某种方法可以在模板中使用导入的对象，而无需在 vue 组件中为其指定别名/属性。即我可以以某种方式使用未在“this”上定义的变量

 <template>
        <div v-if="Store.loaded"></div> //Store not defined on component
        <div v-if="store.loaded"></div> //works
    </template>

    <script>
        import Vue from 'vue'
        import { Component } from 'vue-property-decorator'
        import Store from "../store" // can I somehow use this directly?

        @Component
        export default class App extends Vue {
            store = Store // is there some way so I don't need this line?
        }
    </script>

好吧，这是一个奇怪的用例，但无论如何。

我有一个控件组件，其中包括菜单组件，它还包括一个控件组件但没有菜单（奇怪的东西，但那是设计）。

我所做的。

控制组件：

import {Component, Prop, Vue} from 'vue-property-decorator'
import Burger from "./Burger";
import ShadowLogo from "./ShadowLogo";
import MegaMenu from "./MegaMenu";

@Component
export default class Controls extends Vue {
  @Prop({default: false})
  showMenu: boolean;

  renderLogo(h) {
    return <div class="logo"><ShadowLogo/></div>
  }

  renderBurger(h) {
    return <Burger opened={this.showMenu} label="????" on-want-change={e => this.$emit('show-menu', !this.showMenu)}></Burger>
  }

  renderFooter(h) {
    return <div class="copyrights"></div>
  }

  renderMenu(h) {
    return <div class="menu-layer">
      {this.showMenu ? <transition name="fade" appear={true}><MegaMenu/></transition> : null}
    </div>
  }

  render(h) {
    return <div class={["control-overlay", this.showMenu ? 'menu-opened' : …

根据Vue.js 文档，在单个文件组件中使用pug 预处理器，需要pug -plain-loader（不是 pug-loader）：

{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

如果除了单一文件组件（.vue文件）之外，我还需要将pug模板导入由vue-property-decorator软件包（基于vue-class-component）提供的TypeScript类，该怎么办？

我必须看到仅用于html模板加载的示例：

{
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

如果需要改用哈巴狗怎么办？

@Component({
  template: require('./MyComponent.html')
})
export default class MyComponent extends Vue {
    //...
}

在这种情况下，不应使用pug-plain-loader：

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <button @click="onClickEventHandler">{{ lettering }}</button>
 @ ../ReusableComponents/RegularButton/RegularButton.ts 18:18-48
 @ ./SPA_Test.ts

我知道首先我需要安装pug-loader。但是，如何使我的webpack配置与pug-plain-loader设置保持一致？

// ...
module: {
  rules: [ …

我正在解决以下问题：我使用 Vue 3 和 Typescript 创建了一个 QRCode 组件，代码如下：

<template>
  <canvas ref="qrcodeVue"> </canvas>
</template>

<script lang="ts">
import QRCode from "qrcode";
import { Vue, Options } from "vue-class-component";
import { ref } from "vue";

@Options({
  props: {
    value: {
      type: String,
      required: true
    },
    size: {
      type: [Number, String],
      validator: (s: [number | string]) => isNaN(Number(s)) !== true
    },
    level: {
      type: String,
      validator: (l: string) => ["L", "Q", "M", "H"].indexOf(l) > -1
    },
    background: String,
    foreground: String
  }
})
export default …

我将 vuejs 与 typescript 和 vue-class-component 一起使用。我正在尝试使用反应数据创建自定义组件。

这是我的代码：

<template>
    <div>
        <input v-model="data.name" placeholder="Name">
        <input v-model="data.value" placeholder="Value">
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

interface Model {
    name: string;
    value: number;
}
@Component
export default class ClubVue extends Vue {
    private data: Model;

    public mounted() {
        this.data = {...this.$store.getters.data};
    }
}
</script>

在第一个版本中，我遇到了这个错误：

属性或方法“数据”未在实例上定义，但在渲染期间被引用

这是正常的，正如在 vue-class-component 页面中所说，未定义的数据不会被反射。我需要将数据初始化为空。此外，我收到此打字稿错误：

属性“数据”没有初始值设定项，并且未在构造函数中明确分配

所以我想这样做：

private data: Model = null;

但是我收到了这个打字稿错误：

类型 'null' 不能分配给类型 'Model'。

我不想将数据类型更改为 ，Model | null因为我必须在任何地方检查数据是否为空，而且我知道数据永远不会为空。

private data!: …

因此，我已经阅读了这篇文章几次，据我了解，我可以使用 v-model 而不是 props，将值从父组件传递到子组件，并在子组件中修改 prop 的值时自动发出事件，从而用更少的代码获得双向绑定（不需要捕获父级中发出的事件）。然而它并没有按照我认为应该的方式工作。

这是我的代码：

<template>
  <!-- This is ParentComponent.vue -->
  <ChildComponent v-model:documents="user.documents" />
</template>

<script lang="ts">
  // This is ParentComponent.vue
  import { Vue, Options } from 'vue-class-component';
  import UserClass from '@/some/place/UserClass';
  import ChildComponent from '@/components/ChildComponent.vue';

  @Options({
    components: {
      ChildComponent,
    }
  })
  export default class ParentComponent extends Vue {
    // Local state.
    user: UserClass = new UserClass();
  }
</script>

<template>
  <!-- This is ChildComponent.vue -->
  <section v-for="document in documents" :key="document.id">
    {{ document.name }}
    <button @click="remove(document.id)">Delete document</button> …