问题标签 [vue-slot]

是否可以在插槽上设置属性并且来自父元素的元素获取这些属性？

家长

下拉菜单.vue

按钮的输出没有任何属性...

我正在尝试将 HTML 添加到 Vue 表中的标题中。知道该领域的关键，我可以做这样的事情：

但是，我的表将有未知数量的列，每个列都有未知的启动键（通过 axios 拉入）。从服务器检索所有密钥后，有没有办法动态设置my_key？

描述错误

如果我使用<Form>标签 vee-validate 提供，组件插槽内的反应性就会丢失：

这是 ButtonGroup 组件：

如果我删除<Form>标签，一切都会按预期工作。

在内容中，我添加了一个<StringField>组件，它呈现一个带有一些验证附加功能的基本输入字段：

知道什么可能导致这个问题吗？

摘要：我需要<slot>从子组件中对 a 的内容进行样式设置。我正在使用作用域 css 并且样式不适用：

我有以下两个组件：

我希望第二个<h1>是红色的，但它是绿色的，因为组件是用类似的东西渲染的：

data-v-452d6c4c来自父母，data-v-2dcc19c8-s来自孩子

如果标签中的第二个属性<h1>只是data-v-2dcc19c8我想要的样式，那么它将被应用，但由于它具有该-s后缀（插槽？），它不会。

我可能会找到一些其他的解决方案，但我很少使用<slot>，我想了解内部工作原理。这-s告诉我，我正在尝试做的事情可以在框架的帮助下处理，我错过了什么？

工作样本：

https://codesandbox.io/s/condescending-brown-ilfwn

我有一个非常简单的实现，所以我觉得这可能是一个愚蠢的问题。刚从 vue 开始，我试图让一个组件能够列出其他组件；有点像可重复使用的列表、表格、网格等。

父组件gridView作为普通组件导入：

然后在另一个组件中，我尝试构建它：

然后grid-view-item-test很简单。title作为道具。单独使用或不使用插槽都可以完全正常工作，但我想让它grid-view可重用，以获取我添加的任何其他组件并按原样显示。

如果我要做这样的事情：

它工作得很好。我做错了循环吗？我可以确认循环可以正确获取项目数。如果我在插槽上进行默认后备 - 我得到正确的数字，并且我直接在grid-view组件外部打印了它。

这不是一种可能吗？如果不是，您是否只使用 HTML 而不是可重用表格的组件，因为这似乎工作正常。

编辑：

如果我使用字符串或数字，但不使用对象，它完全可以正常工作。

我已经追踪到它items是一个空数组作为计算变量，然后抛出TypeError: null is not an object (evaluating 'oldChildren[i]'). 可以确认它items开始为空，然后在数据库调用设置它后填充，但我想我不能用插槽做类似的事情？

经过更多测试后，当您完全更新数据集（items）时它会失败。像这样的插槽无法重新渲染吗？

如果在初始数组中没有项目时我有一个空的 div （或任何东西），它可以完美地工作。

我正在尝试为能够使用单例的 Tippy JS 实现一个包装器组件。为此，我需要从子元素（包含在包装器的插槽中）发出/收集tippy 实例，并从中创建一个单例。

我见过多个关于使用事件总线（例如 mitt）来传递数据的线程。我预见的问题是，当子级发出事件时，父级还没有准备好处理事件，而且我不确定如何干净地链接所有可能的 wrapper-child 组。

注意：我知道 Scoped Slot 模式，但我需要在代码中使用数据（准确地说是在挂载的钩子中），所以我认为这不是一个可行的解决方案。

我有一个警报组件

我希望能够通过插槽将 HTML 传递给它，以便我可以准确定义警报的外观，例如

我传递给插槽的文本呈现为 HTML，并且标签按预期工作。

但是，我要传递警报的文本将根据 API 的响应动态生成，因此我尝试执行以下操作

然后我按如下方式调用组件

这将呈现纯文本，包括 html 标签，而不是像第一个示例中那样呈现 html 标签。

我怎样才能做到这一点？

到目前为止，这是我的代码：

我想要的是拥有并覆盖类似于材质ui的表列槽，如下所示：

我如何实现命名插槽，就像他们将其视为对象一样？

我是网络开发的初学者，我正在尝试帮助朋友重新启动旧游戏。我负责工具提示组件，但我碰壁了......

有很多 Vue 组件，其中很多我想调用一个名为 Tooltip 的子组件，我使用它vue-tippy来轻松配置。这是组件：

在其他组件之一中，我尝试使用工具提示：

从这里一切都很好，工具提示以正确的内容正确显示。

问题是，文本中的文本{{ named.description }}需要与formatContent内容一起格式化。我知道我可以使用道具，组件看起来像这样：

工具提示.vue：

父.vue：

但我需要在工具提示组件中使用一个插槽，因为我们将有一些带有v-for.

有没有办法将数据从插槽传递到 JS 函数？

我正在制作一个InputWrapper组件，用于装饰一些 BootstrapVue 输入组件。重点是围绕给定输入自动处理验证状态、消息、样式等（未在下面的示例中显示）。

我想动态地“转发” v-model。当包装的组件使用自定义模型属性和更新事件进行双向绑定时，就会出现问题。

主要思想如下。

InputWrapper.Vue

用法

我目前和不满意的解决方案

这个解决方案让我可以做我想做的事，但它的实施时间更长，而且你总是需要附近的 BootstrapVue 文档。

另一种解决方案是为每个 BsVue 输入创建一个自定义组件，但我还需要将每个属性和事件转发到自定义组件。不这样做的原因有很多，但主要是更难维护。

我的问题如下：如何在事先不知道它们的情况下使用 v-bind="attrs" 和 v-on="on" 动态绑定任何自定义 v-model 属性和事件？