问题标签 [vue-class-components]

我有一个创建多个全局可用组件的插件，这些组件访问主应用程序中其他插件设置的实例属性。在大多数 Typescript 示例中，人们通过import { Vue } from 'vue'或者import { Vue } from 'vue-property-decorator'我想使用传递给我的插件的 vue 构造函数来获取他们的 Vue 构造函数。你会怎么做？

这是我的尝试，可悲的是没有用。我知道它可以在不使用类的情况下工作，但这不是重点。

我想在我的项目中使用 vue-simple-spinner，但是当我导入它时，我收到以下错误：

我创建了shims-spinner.d.ts文件：

但后来我明白了Circular definition of import alias 'Spinner'。

我怎样才能解决这个问题？

以下代码：

引发错误：

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

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

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

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

这些规则会立即执行，即使lazy-validation在Vuetify forms上也是如此。

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

1. 绕过 Vuetifyrules系统并允许简单地返回要在模板本身内翻译的字符串；
2. 解决$t即时可用性问题。

可悲的是，我无法完成其中任何一项。

有没有办法解决这个问题？

我不知道如何解决这个问题，因为它有很多内容，而且这种行为是我以前从未在 JavaScript 或 Vue.js 中看到过的。当然，我会尽量保持代码最小化批判和碎片

我正在使用 vue-class-component(6.3.2)，所以我的 Vue(2.5.17) 组件看起来像类:) 这个特定组件看起来像这样：

GameInterface 返回一个带有启动方法和其他游戏变量的对象。

在游戏接口文件中的方法看起来是这样的：

太好了，它起作用了，对象被传递到我的 Phaser 游戏:) 并且它也被方法返回，这意味着 Vue 现在可以使用这个对象。

在某些时候，我的 Vue 类中有一个 getter 方法，如下所示：

果然，即使玩家和 id 明显存在，也会返回 null 。当我 console.logthis.user.id我得到4，并gameInterface.gameState.players为玩家返回一个带有 getter 的对象，如下所示：

好吧，所以即使对象和键被正确传递，它也不会返回玩家......

但是我发现了一种非常奇怪的方法来“修复”这个问题：通过JSON.parse(JSON.stringify(gameState))像这样添加

它成功地为我们返回了当前玩家......奇怪吗？

我的猜测是，当我们这样做时，我们会“碰撞”对象，Vue 会因此而注意到一些变化并正确更新对象。有谁知道我在这里想念什么？

In my setup jsx written inside vue component works correctly, then I migrate project on TS and use vue-class-component.

The only thing which works with tsx for me is the following (as in example in repo)

notice h here - without it - it doesn't work, but should

I have a component which can accept render props. Looks like this:

In defaultRender some other jsx. And default works fine. But when I try to pass function with jsx, it doesn't work (in TSX, for common vue js based component it works perfect).

I used to have this jsx written inside my created hook. Like this:

Notice that I don't have to pass h here somehow. It works in JS - but doesn't work in TSX. Have no idea why...

When it's transpiled it looks like this:

Indeed, jsx is transformed, but h is undefined here. I saw transpiled code from js (which works) and the key difference as for me is that line:

var h = this.$createElement;

inside created() function. I don't see this line in transpiled code for my tsx component. What I do wrong here?

Here is my .babelrc (I use babel 6)

And webpack rules

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

在构造函数中定义属性：

模板参考：

属性定义：

浏览器中的输出：

在挂载的生命周期中定义属性：

模板参考：

属性定义：

浏览器中的输出：

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

模板参考：

属性定义：

浏览器中的输出：

问题：

• 所有三种方式都会产生相同的输出。是否有黄金法则/最佳实践，应如何定义属性以及在哪个生命周期中？
• 如果属性是在构造函数或已安装的生命周期中定义的，是否有区别？

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

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

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

如果需要改用 pug 怎么办？

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

我知道首先我需要安装 pug-loader。但是我需要如何使我的 webpack 配置与 pug-plain-loader 设置相协调呢？

更新：第一次解决后的错误输出

零件：

我不认为@Hammerbot 的解决方案是错误的；也许这是正确解决方案的一部分。无论如何，通过设置

所有作品，除非.pug无法在@Component装饰器中导入：

当一个“*.vue”文件被分成不同的文件时，即：<script lang="ts" src="./x/script.ts">VSCode 抛出错误；但是，serve脚本没有。编译没有问题。错误与$refs属性有关。VSCode 无法识别已注册组件的属性： Property 'sideBarVisibilityChange' does not exist on type 'Vue'..

$refs在脚本标签内声明为 SFC 组件时，如下所示：

然后在方法中访问 SideBar 组件：

只要代码是 SFC，一切都可以正常工作。导入脚本时它会“中断”。该错误仅出现在 VSCode 中，这意味着当我运行npm run serve( vue-cli-service serve) 时，我没有收到任何错误！但是，我在 VSCodeProblems窗口中得到了这个：Property 'sideBarVisibilityChange' does not exist on type 'Vue'.ts(2339)。

我的设置：VSCode、Vue + TypeScript、vue-class-component、vue-property-decorator。

组件已导入。它ref在模板内部声明为 a 。如果您想看一下，这里还有更多代码：https ://gist.github.com/JakubKoralewski/9d11bbb9535a96356466b37745630f8f

或者我目前正在研究的整个回购： https ://github.com/JakubKoralewski/dziennik_php_frontend/tree/class-components

我目前正在处理一些错误。他们不是针对这个问题的。

非常奇怪的是，当我尝试通过单击路径来跟踪从 Vue 文件到脚本的链接时，我收到了这个奇怪的错误：

即使我做了这个愚蠢的事情，让 VSCode 打开文件路径也不起作用，我像这样导入脚本，<script lang="ts" src="../Authorized/script.ts"></script>这在逻辑上是荒谬的，但是在发生错误时显示正确的路径。确切地说，它仍然会发生。这意味着错误是f:/f:/一部分。我认为这是一个 VSCode 怪癖，文件路径实际上是正确的，但是当我尝试创建一个像 VSCode 这样的文件时，我得到了另一个错误：

但是，这似乎不是问题，因为我提供了文件的整个绝对路径，使后续链接工作，但这没有任何改变。

这是 VSCode 在开发者控制台中抛出的错误：

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

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

这是一个示例组件：

我正在使用带有 TypeScript 类（.tsx 文件）的 Vue CLI 3.x。

我想为我的所有视图实现权限处理。

最简单的场景是：路由到组件 X；有访问权限吗？停留; 没有权限？路由到默认页面。

我已经实现了正确处理所有事情的逻辑，但是我在一个好的架构上苦苦挣扎。

现在，我将受保护的处理函数添加到 Vue 组件ViewBase中，并且我的所有也是视图的组件都继承了这个类并在它们的created()生命周期钩子中调用这个函数。它看起来像这样：

但我不喜欢在我的每个组件中手动调用 created 钩子中的某些内容。我可以以某种方式自动化吗？