标签: vue-class-components

我正在尝试使用 vue-class-component 和 typescript 创建一个 vue 组件（在这里找到https://github.com/vuejs/vue-class-component）。据我了解，数据是在类中定义的，正如我在下面所做的那样 - 但我收到了错误：

"[Vue warn]: Property or method "test" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property."

这是我的实际代码的精简版本，但它仍然不起作用：

<template>

  <div id="vue-test">
    <input v-model="test"/>
    {{test}}
  </div>

</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
})
export default class AppearanceDialogVue extends Vue {
  public test: string = '100'; …

我正在尝试使用具有以下要求的vue-class-component和vue-property-decorator在typescript中创建vuejs组件库：

• 库组件应以类样式的打字稿编写。
• 库组件应作为es6模块导出，以允许在项目中进行树状交换。

对于库，我使用了最新版本的@ vue / cli来搭建项目。在该库项目中，组件运行正常。

另一方面，该应用程序正在使用webpack-setup，在这里我要使用vue组件。

通常，当我想在es6中构建基于打字稿的库时，我会使用tsc将ts文件转换为es6 js文件。但是按照这种方法，组件不知道模板。有没有一种方法可以将tsc与vue-template-compiler结合使用？

我找到了另一种方法来完成这项工作，但是我对这种方法完全不满意：

我用"vue-cli-service build --target lib --name vue-lib ./src/index.ts" 这样的方式在文档中规定的VUE-CLI-服务将创建一个UMD束和CommonJS的束在这里。在项目中，我可以将组件与//@ts-ignore上面的语句一起使用。所以我失去了声明，并且组件不在es6语法中：/

为了更好地理解我所遇到的问题，我在github上创建了一个最小的示例，您可以在这里找到：

图书馆：https： //github.com/Sh4bbY/vue-lib

应用程序：https： //github.com/Sh4bbY/vue-project

我正在尝试使用vue-property-decorator包实现Vue Router的组件内导航保护。在底层，vue-property-decorator依赖于vue-class-component软件包。它提供了一种registerHooks方法，使您可以声明应将哪些方法视为生命周期挂钩（而不是实例方法）。

以下代码有效，输入路线时会发出警报：

import { Component, Vue } from 'vue-property-decorator';
import { router } from './Router';

@Component({
    template: '<div></div>'
})
export class Foo extends Vue {

    beforeRouteEnter(to, from, next){
        alert('Entering Foo');
        next();
    }
}

router.addRoutes([
    { path: '/foo', component: Foo }
]);

Router.ts文件包含根据docs的挂钩注册，并且确切地是：

import VueRouter from 'vue-router';
import { Component } from 'vue-property-decorator'

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteUpdate',
  'beforeRouteLeave'
]);

export const router = new VueRouter({
  mode: 'abstract'
});

路由器文件是在导入组件之前导入到App.ts文件中的，因此，挂钩是在导入组件之前注册的。

但是，我似乎无法将回调传递给nextmethod。给定Foo …

我正在开发一个组件，当搜索栏中的文本发生变化时，该组件会查询外部 API，并且我正在尝试消除该查询，以便它只能每 2 秒执行一次。我正在尝试使用 lodash 的debounce函数来做到这一点，并且发现了多篇博客文章和有关将其与 Vue 组件一起使用的问题，但事情很复杂，因为我正在使用 Typescript 和 Vue 类组件语法（https://class- component.vuejs.org/）。老实说，我对这两者都很陌生。

我发现一篇博客文章概述了如何使用基于对象的 Vue 组件语法来执行此操作，但它不适用于类组件语法。基于对象的语法允许您将方法包装在 a 中_.debounce，如下所示：

export default {
  methods: {
    throttledMethod: _.debounce(() => {
      console.log('I only get fired once every two seconds, max!')
    }, 2000)
  }
}

有没有办法用 Vue 类组件语法做类似的事情？

以下是我的代码的相关部分（没有任何去抖动尝试）：

<template>
  <input
    v-model="searchQuery"
    @keydown="doSearch"
  >
</template>

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

@Component
export default class FooSearch …

如下代码：

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class SomeComponent extends Vue {
  public someText = this.$t('some.key')
}

引发错误：

[Vue warn]: Error in data(): "TypeError: i18n is undefined"

我确保使用Vue.use(VueI18n)和初始化Vue new Vue({ /* ... */, i18n })。该i18n对象以这种方式初始化：

new VueI18n({
  locale: DEFAULT_LOCALE, // imported
  fallbackLocale: 'en',
  messages // imported
})

只要不立即调用翻译，例如在模板或组件方法中，它们就可以很好地工作。

这个vue-i18n问题似乎暗示存在初始化问题。
我可以通过使用方法并仅在模板中进行转换来解决此问题，但是在我的控制范围之外，有一个特定的实例会发生这样的立即调用：Vuetify input rules。

someRule = [(v) => !!v || this.$t('field.must_not_be_empty')]

即使lazy-validation在Vuetify表单上，这些规则也会立即执行。

我确定了两种可能的解决方案：

1. 规避Vuetify …

本质上，我在 Github 上有与此和此问题相同的问题，不幸的是，它们在得到答复之前都已关闭：/

我将 Vue 与 Typscript 和 Vue 类组件一起使用。我需要做的是从 @Component 装饰器内的观察者内部访问我的（Vue-）类的方法。我知道可以使用 访问组件的数据this.$data，但是方法呢？

我的代码可以在运行时运行，但会在 vscode 中产生编译时错误和错误（“属性‘clearInfo’在类型‘Vue’上不存在。”)；

@Component({
  watch: {
    firstMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(1);   // this produces the errors
      else this.showMeshInfo(newMesh, 1);
    },
    secondMesh(newMesh) {
      if (newMesh === undefined) this.clearInfo(2);
      else this.showMeshInfo(newMesh, 2);
    },
  },
})


export default class Info extends Vue {
  clearInfo(whichMesh : number) {
...
  }

  showMeshInfo(mesh : any, index : number) {
    ....
  }


}

我只是想知道哪种方式定义属性最可靠，它应该在模板中生成输出。

在构造函数中定义属性：

模板参考：

<h1>{{msg}}</h1>

属性定义：

<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";
  @Component
  export default class Test extends Vue {
    protected msg: string;
    public constructor() {
      super();
      this.msg = 'Today\'s date ' + moment().format('YYYY/MM/DD');
    }
  }
</script>

浏览器中的输出：

<h1>Today's date 2019/03/07</h1>

在 Mounted 生命周期中定义属性：

模板参考：

<h1>{{msg}}</h1>

属性定义：

export default class Test extends Vue {
  protected msg: string = '';
  mounted() {
    this.msg = 'Today\'s date ' + moment().format('YYYY/MM/DD');
  }
}

浏览器中的输出：

<h1>Today's date 2019/03/07</h1>

通过get和set定义属性，在构造函数中设置值：

模板参考：

<h1>{{msgText}}</h1>

属性定义： …