问题标签 [vue-composition-api]

在我的应用程序中，我有两个独立的组件：

• 产品组件（在 ui 中显示产品）

• filter-products 组件（在 ui 中显示标准）

• total-filter-products 组件（显示在 ui 中应用的总条件项，例如我当前的搜索是age，name依此类推）

它们是独立的，不与输入 ( :) 或输出 ( @) 通信。

我还有一个ts文件，功能useProducts为“api-composition style”。

在products组件中，我只是获取productsfromuseProducts并绑定到模板：

在过滤器产品中，我获取criteria模板useProducts并绑定到模板。每次criteriaref 中的某些值发生变化（使用 v-model）时，我都会运行该load函数。

在 total-filter-products 组件中，我做了一些逻辑来显示标准：

这个问题是每次我调用useProducts我执行函数并获取新变量时。

我得到了三倍criteria。因此，如果我更改criteriain filter-products，total-filter-productsandproducts组件将永远不会知道它。

如何以 api-composition 样式在组件之间共享组合？

我有一个包含 2 个子组件并使用 Vue 2 组合 API 插件的父组件。
它抛出错误“[Vue 警告]：未知的自定义元素：-您是否正确注册了组件？” 仅当组件正常运行时；它与有状态组件一起使用。
<over-view>被选中是因为 prop isSearching 为 false；但如果条件恢复（v-if="!props.isSearching"），SearchView 也是同样的问题。

两个孩子都是有状态的组件。

当计算值依赖于一个引用依赖于另一个引用的多个引用时，对于计算值仅触发一次昂贵的重新计算的最佳实践是什么？

例子：

在以下设置中，我只想expensiveData计算一次。expensiveData当varA或varB变化时重新计算，但又varB从varA. 所以当varA改变时，varB也必然会改变。

some-other-file.js

expensive-calc.js

有哪些可能的方法来处理这种情况，以便expensiveData只重新计算一次？

注意事项：

• varA并且varB在语义上是不同的，因此创建一个将它们捆绑在一起的新计算值不太有意义。

当前的解决方案是消除对makeExpensiveDatawith的调用lodash.debounce。由于varB派生自varA，因此它们会同时触发重新计算。

但是，我对 Vue 的组合 API 比较陌生，所以我想知道是否有更好的方法来处理这个问题。

我尝试在 codesandbox.io 中运行此代码，但出现错误 - 单击链接时会发生错误：

[Vue 警告]：数据（）中的错误：“ReferenceError：[vue-hooks] 未找到

vue 实例。” ReferenceError: [vue-hooks] 未找到 vue 实例。

[Vue 警告]：属性或方法“产品”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅： https ://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。

不知道为什么因为代码看起来是正确的。

我尝试从我的代码中删除一些片段，似乎useRouter是问题所在。但为什么？任何想法如何解决这个问题？

我正在尝试使用加载功能制作一个简单的 Vuetify 按钮。Vuetify 已预制组件。我正在尝试将他们提供的代码转换为与组合 api 一起使用。

我遇到了问题this。

这是 Vuetify 提供的：

所以转换为组合 API，这就是我所在的位置。我的watch功能显然是非常错误的。不确定这是否是使用这个新的正确方法watch。另一个问题是如何处理this这种格式的情况：

Vetur 在下面这一行加下划线：

这是一个浓缩的上下文。任何想法我做错了什么？

我有一个使用 v3 组合 API 的 Vue 组件：

当 watchEvent 运行时，我收到错误消息Cannot read property "$emit" of undefined。看起来我没有使用错误类型的函数（箭头与正常函数）。

无论是函数还是箭头函数，它似乎this始终是未定义的。setup()

在Vue.js中使用“渲染”函数（而不是模板）时，有没有办法使用Composition API绑定（并在组件本身中公开）“数据”/“方法”？

（之前在 Options API 中，如果在 options 配置中使用render方法，所有的data/props/methods仍然暴露在组件本身，仍然可以通过componentInstance.someDataOrSomeMethod访问）

模板化组件：

非模板“渲染”组件：

使用render选项的选项 API ：

我正在使用 Composition API 在 VueJS 3 中创建一个库。我实现了docs中提到的提供/注入。但子组件中的属性仍未定义，我在浏览器控制台中收到以下错误：

我的代码的一个非常简单的实现如下：

项目中的使用

ThemeProvider.js（父组件）

Button.js（子组件）

文档说这是可能的，但没有示例说明如何。一个人会怎么做？