问题标签 [vue-composition-api]

如何在 Vue 3 中创建事件总线？

在 Vue 2 中，它是：

在 Vue 3 中，Vue不再是构造函数，而是Vue.createApp({});返回一个没有$on和$emit方法的对象。

我正在尝试将从道具传递的项目添加到ref使用vue-composition API. 但是，我不知道为什么这些项目没有添加到数组中。也许我以错误的方式使用了扩展运算符，或者我的实现错误但未添加该项目。

vue-composition方法位于不同的文件中，并在整个组件中使用。

我以这种方式将道具传递给产品组件：

同样，产品组件setup如下：

ShoppingCart.js我在哪里使用@vue-composition-api

我不知道我哪里做错了，basket从不同的组件调用时数组总是空的。

更新的问题：

所以，我开始使用 Vue Composition API，它很棒。我在一个有 Vue 组件和 Vanilla JS 的项目中使用它。我正在 Vue 中构建一个通知系统，因为我们正在慢慢地以这种方式移动一切。

我目前有以下代码用于添加通知

我可以从 Vue 中完美地添加这个，但我还想从系统的 vanilla JS 部分添加一个通知。我尝试过使用useNotification().add()，但出现以下错误[vue-composition-api] must call Vue.use(plugin) before using any function.基本上，它希望我在 Vue 中使用它。

关于如何让这个工作的任何想法？

我开始学习 vue，我试图练习一点，但我被 for 循环卡住了。

我正在调用我为更好地理解数据处理而开发的 api。调用的输出是：

我的目的是使用 v-for 来遍历购买数组，以便它可以显示 json 中每个条目的数组内容。

我正在使用的 vue 模板是：

vue文件中的脚本：

我知道我只显示了数组的第一个元素，而这正是我的问题，如何使用 v-for 遍历整个数组。

我将非常感谢您的帮助:)

我有一个 Vue 组件，它曾经与$route.
由于我做了一些升级，它不再起作用，我收到消息：

[Vue 警告]：无效的监视源：“$route”。监视源只能是 getter/effect 函数、ref、反应对象或这些类型的数组。

这是我的package.json：

和我的 Vue 组件（带有 的 Vue 2 @vue/composition-api）：

I'm sending from the parent component a prop: user. Now in the child component I want to make a copy of it without it changing the prop's value.

I tried doing it like this:

But then if I change a value of the user object it also changes the apiUser prop. I thought maybe using Object.assign would work but then the ref isn't reactive anymore.

In Vue 2.0 I would do it like this:

Credits to @butttons for the comment that lead to the answer.

const user = reactive({ ...props.apiUser });

我正在制作一个简单的组件（SFC），它循环遍历字符串列表并用值替换标题中的文本。

我计划对我的所有组件使用组合 API，因为我更喜欢结构和设计。

我以为我已经正确地制作了我的组件，但它不会在 DOM 中自动更新。

日志正确显示值更新，但在 setup() 最初调用后，该值永远不会改变。

组合 API 样式（不更新 DOM）：

我想知道我的代码逻辑是否出错，所以我使用 Options API 创建了相同的组件，它立即工作：

选项 API 风格（作品）：

如何在 Vue 的新 Composition API 中复制此功能？

我需要做什么才能text让我在代码中更改它并保持反应性？简单地使用ref(text)并返回它，似乎并没有这样做。

我有一个包含邮政编码的输入字段。在提交时，我想将邮政编码作为对象传递给 axios 请求。我在这里创建了一个 CodeSandbox：https ://codesandbox.io/s/determined-beaver-8ebqc

相关代码为：

应用程序.vue

使用-axios.js

以这种方式将邮政编码输入字符串转换为对象似乎很 hacky。此外，如果我需要向 axios 请求发送多个参数，这会变得非常混乱。说如果我想通过{ id: "1234", user: "Me" }，我希望能够像这样构建：

sentData = { id: ${id}, user: ${user} }

但我无法做到这一点。这样做的正确方法是什么，以便我可以保持 use-axios 通用？

我正在构建一个通知系统，它可以正常工作，但不能正常工作。我有以下组合功能

这是有效的（它被简化了一点）。现在，我在 Webpack 中有两个入口点。在一个入口点 (auth) 中，我有以下代码来加载 Vue 组件以显示通知

现在，这一切都有效，我在其中添加了以下代码

然后通知按预期显示这一切都发生在“auth”入口点内部，以上都是打字稿。

现在，如果我转到我的第二个入口点（编辑器），并在现有的 JS 文件中输入以下代码

然后它“工作”，我的意思是，useNotification 函数中的所有代码都工作。add 方法将添加它，（如果我控制台注销响应属性），并且在 15000 毫秒后，删除方法发生，我可以添加日志来显示这一点。但是，Vue 组件永远不会看到这种变化。如果我在 Vue 组件中添加一个手表，然后退出，第一个通知（上图）将使 JS 登录到控制台，但是，当从“编辑器”入口点添加它时，它不会做任何事物。

Vue 组件 JS

请有人告诉我他们可以帮忙吗？这开始让我头疼了……

TIA

我有这些文件

App.vue、Header.vue、search.js 和 Search.vue

App.vue是正常的，只是添加不同的视图

Header.vue有一个输入框

和脚本：

search.js有可重用的代码

现在，这运行良好.. 在输入框中添加内容后，它会显示在下面的 div 中。

我不明白的是如何将此代码用于像 Search.vue 这样的第三个组件。

我有这个，但它不起作用。

我错过了什么？谢谢。