问题标签 [vue-composition-api]

我正在尝试使用组合 API 重构一些组件。有一个函数需要发送请求。

由于无法访问thisonsetup(props, context)我认为我可以像向 parent ( )发出context事件时一样使用此参数，但情况似乎并非如此。context.emit()

使用context时出现错误：

使用时出现错误：

这是我想要实现的一个片段：

我正在尝试使用此组合 API 在 Vue 中构建可重用的模态组件。计划是公开一些方法，例如toggleModal()调用父组件中的某些事件。我已经在setup()和中编写了我的方法methods。

如果我是console.log()我的模态组件，我可以看到只有我toggleModalMethod()的 frommethods被暴露。

有没有办法公开子方法并从父组件调用它？

最近我将我们的 vue.js2.x 项目迁移到 typescript，并基于 evan-you 在本期的评论：

https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121

类 API 提案正在被放弃。所以我使用的是基于常规选项的 vue.js 版本，它给我带来了很多类型问题。

我想知道 vuejs2.x composition api 是否与 typescript 完全兼容？我应该用它来解决所有问题吗？在这种情况下，最佳做法是什么？

问题已解决，请通读问题，了解如何逐步解决问题

我阅读了有关组合 API（https://vue-composition-api-rfc.netlify.com/#api-introduction）的信息，并尝试转换我现有的基于 vuejs 中 Option api 上的打字稿的代码，但我未能让它工作，有点困惑组合 API 是如何工作的。

我的工作代码如下：

组合 api 中的转换版本低于未正常运行的版本：

其中 webstorm 显示 3 个错误：

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

.....................

更新1：

我在使用道具时犯了错误（我以为我是新的 vue，它不需要类型，它会自动从父组件的 typescript 中获取它）。多亏了古问题，问题已经解决并得到解决。

以及在获取道具类型错误方面遇到类似问题的任何人，如下图所示

感谢https://frontendsociety.com/using-a-typescript-interfaces-and-types-as-a-prop-type-in ​​-vuejs-508ab3f83480 ，您可以将创建的类型接口作为如下函数传递：

但仍有一些问题需要解决，如下所示：

1.当我删除反应性时，反应性似乎无法正常工作，并且在模板中显示“未解析的变量或缺少导入语句”

…………………………………………………………………………………………

update2分享道具和使用合成功能：

对我来说，在将基于选项的 api 转换为组合 api 之后，它似乎比新的更好，这要归功于古和 Maximilian shrwazmuller（我强烈建议观看这个免费视频： https: //www.youtube.com/watch ?v=V-xK3sbc7xI），谷歌搜索与这个https://vue-composition-api-rfc.netlify.com/api.html#template-refs我重新编写代码如下：

如您所见，它非常简洁，因为将在组件之间共享的所有内容都在另一个文件中（名为：inputFiled.compositons），如下所示：

正如您所看到的，通过此功能，我们可以充分发挥打字稿的潜力。

最后我应该告诉你，如果你遵循路径并使用 vue-composition api，你的项目将完美运行，但 webstorm 会向你显示一些关于模板中特定代码的警告，比如未解析的变量。这些新的语法支持正在开发中，您可以在本期https://youtrack.jetbrains.com/issue/WEB-41565中看到， 所以不要担心并使用它。

I have a setup similar as the example in the docs where my composition lives in a separate file from my component as follows:

I would like to write a separate (Jest based) test file for just the composition.js file. However, when calling the composition directly, Vue will error out (expectedly):

I've tried mounting a mock composition API based component in order to provide a setup() function, but having some trouble getting it to work:

Does anybody have any bright ideas on how to get this to work so I can write tests for my modular compositions?

我正在使用带有打字稿的 vue composition api。

如何使用打字稿打字系统强输入组件道具？

我有多个共享逻辑部分的组件（textField、radioField、numberField、...），例如：

目前我在每个组件的脚本标签中使用 src ，它只需要像下面这样的基本组件，它可以工作（但似乎共享一个对象而不是一个新对象，这使得我的选择选项就像一个文本字段，我不想要它):

对于那些像 radioField.vue 这样的代码（这里只是一个“ colorStateCheck ”，正如您在下面的代码中看到的那样）而不是 baseInputField.ts，我无法正确扩展并使用它。

有没有合适的方法来做到这一点？

......

（如果你想从选项 api 到组合 api 这条路径并解决你的问题，你可以在 Convert Vuejs Typescript Options to Composition Api 中按照这个询问奇怪的问题，我在这个问题中做了这一步）

如何合并来自两个组合函数的状态？我已阅读文档并没有找到任何示例？

在main.js我有这样的事情：

通过这种方式，我可以访问myUtilFunc整个应用程序this.$myUtilFunc

setup()但是，如果我无法访问 Vue 3中的方法，我该如何实现this呢？

错误：“设置”必须返回“对象”或“函数”，得到“承诺”