问题标签 [vue-slot]

问题描述

我正在尝试访问插槽中传递的 Vue 子组件。

我用以下方法做到这一点： this.$slots.default()

我收到组件，甚至可以使用以下方法访问和调用组件的方法： this.$slots.default()[1].type.methods.methodName

问题是在子组件中的this关键字现在已更改为另一种类型，您只能访问该组件中定义的方法和受限变量。因此，例如，除了定义的方法和一些变量之外，您无法访问 this.$refs （我实际上需要）或 this.$el 或其他任何内容。

我试过的

我尝试将 this.$refs 分配给 onmount 函数中的变量，然后在从父组件调用方法时尝试访问它，但您无法访问该变量。

在 Vue2 中，您可以完全访问子组件，这将起作用。

有没有办法在 Vue3 中修复它？

我已经使用 vue.js 注册了一个文件表组件：

我想将其用作代表性组件。当我尝试在 Laravel 刀片中将 tr 和 td 元素传递给它时，例如：

我如何注册组件：

除了行和数据元素之外的所有内容都会被渲染，并且表格会变形。这是在浏览器中呈现后的表格内容和元素：

浏览器图片中的表格元素

我已经阅读了在线文章并通过 Q/As 进行了搜索，但找不到任何东西。

我正在构建一个 Vue 应用程序。我有两个相互关联的组件。其中一个被调用loginRegister.vue，其代码在这里：

登录注册.vue：

另一个调用BaseModal.vue，代码在这里：

BaseModal.vue:

有一些代码与这个问题无关，我也试图简化代码并澄清与我的组件代码相关的transition部分slot。

尽管代码可能看起来很长或很复杂，但我想要达到的目标很简单。我想在模态组件中提交注册表单。实际上，我的应用程序中的用户单击注册按钮，然后BaseModal.vue显示该组件。在这种情况下，注册表单（为简单起见，我用h4标签代替）是用户可以看到的默认内容。根据流程成功或出现错误提交表单后，我想向用户显示一条消息并将按钮的文本从提交更改为如果出现错误重试。之后，当用户单击try again按钮时，表单（h4标签）必须再次淡入。所以我在我的组件中尝试了v-if/v-else-if/v-elseVue 的结构。loginRegister.vue我使用的代码transition part与使用Vue文档的代码类似，但转换无法正常工作。在我的本地开发环境中，h4标签顺利消失，然后再次单击标签淡入后try again没有显示任何消息。h4同样在控制台中我可以看到这个警告：

但我认为这与我的问题无关，因为我没有在我的应用程序的多元素上使用过渡。那么有人可以帮我看看我的代码有什么问题吗？

我创建了一个自定义组件，它允许我应用淡入淡出的过渡，而无需始终编写<transition>组件：

但是当我在某个地方使用它时：

我收到以下错误：

我该如何解决？

我有一段代码使用 Vue-Formulate 和组功能，我尝试实现自定义按钮来删除嵌套项；

这种上瘾会更改默认<a ...>链接到按钮，但删除项目的功能会丢失。这个插槽的文档说：

“可重复时的删除按钮。此插槽中的上下文对象包括索引和一个 removeItem 函数，应调用该函数来删除该项目。”

我不确定如何向removeItem它添加函数调用。