问题标签 [vuejs-slots]

我有一个父组件：

在我的子组件中，我有方法，我需要在单击复选框以捕获复选框事件时调用该方法。

我觉得这应该非常简单，所以这使它更加混乱。我无法将 EventCard 中的文本放入 BaseIcon 插槽。

我的 BaseIcon 组件看起来像这样......

我的 EventCard 组件看起来像这样..

不使用插槽一切正常。图标显示，但文本和参加者长度未显示。任何帮助将不胜感激！！！如果有帮助的话，我的所有组件也会在全球范围内注册。我也安装了 lodash 和 feather-icons。如果查看 main.js 以了解我如何注册所有内容会有所帮助，请告诉我。谢谢！

我有一个这样的组件

我想用渲染功能渲染这个组件。我的尝试是这样，但它不起作用。

这里component是我导入的单文件 vue 组件（HelloWorld）。element是主 html 上的一些元素。

这里有什么问题？

我创建了一个显示各个页面的表格数据的组件。该组件在内部使用b-table。现在对于几个页面，我想自定义一些列的呈现，并且引导表允许使用具有特殊语法的范围字段槽：

其中字段 - 列名，来自我的列数组，以及 data.item - 要呈现的单元格项目。

问题是我对不同的页面有不同的字段，所以这个自定义应该来自父组件，并且这些模板应该是动态创建的。

以下是我尝试解决的方法：

通过属性传递给 MyTableComponent 一个具有可自定义字段和唯一插槽名称的数组在 MyTableComponent 中动态创建自定义模板，并在内部动态创建命名插槽

从父传递槽数据到命名槽

我的表组件：

家长：

不幸的是，b-table组件只是忽略了我的自定义插槽，就像没有提供它们一样。如果我直接在 MyTableComponent 中指定它，它会起作用：

但我需要它通过组件属性动态完成。请帮忙。

我在 Vue.JS 上苦苦挣扎，该组件具有作为子项/插槽的一些带有画布数据的“复杂”组件（例如地图）。

我想避免当父组件重新渲染时，它们的内部插槽重新渲染。由于这些组件的工作方式（或任何其他场景），每次重新渲染时都需要执行所有“加载”步骤。即使保存他们的实时状态。

例如：

组件.vue

看法

有什么方法可以防止插槽在其父级重新渲染时重新渲染？

提前致谢。

我们正在创建一个应用程序，其中接口基于 API 返回的 JSON 动态安装。它看起来像这样：

所以我ComponentLoader用computed做一个动态创建了一个动态import，然后我还根据需要递归地注入更多的动态组件加载器，使用一个v-for通过children列表：

它几乎可以工作了，但是所有孩子都被注入到每个加载组件的默认插槽中，这很有意义，因为我没有在通过孩子的循环期间通知所需的插槽。

受到这个答案的启发，我在with上添加了一个v-slot绑定，使用动态插槽名称注入基于已从 JSON 接收的属性的正确插槽：<template>v-forchild.slot

对于每个插槽上只有一个子节点的节点，它按预期工作。但是当我有更多的孩子要分布在同一个插槽中时（比如那个 JSON 中的最后一个孩子数组），只有最后一个孩子被注入，之前覆盖了其他孩子。

那么，如何在循环中将许多子节点注入到动态命名槽中？

我有一个简单的FormComponent：

当我使用组件时：

输入字段已正确插入到组件中，但:disabled="!isEditing"来自插槽isEditing的FormComponent.

Vue 文档非常好，但并没有涵盖每个边缘情况。

我第一次在 vue.js 中使用插槽进行布局。根据参考，我包含了该组件并在需要它的适当位置使用了 slot 标签，但是 slot 标签仍然无法呈现我想要在布局页面上显示的标签或数据。我在控制台日志中没有发现错误，我的页眉组件和页脚组件被成功包含，并出现在网页上。但插槽标签不起作用。这是我的代码。请帮我找出我的错误。

插槽测试.vue

测试.vue

如何访问在组件的命名槽内呈现的 Vue 组件的功能？

我有以下结构：

父组件.vue

实用组件.vue

子组件.vue

在UtilComponent中，我想访问ChildComponent's myFunction()（单击按钮时，不在安装时）。我曾尝试this.$slots[0]在 UtilComponent 中使用，但它只给我一个VNode没有我需要的属性（数据和函数）。this.$slots[0].context给了我完整的 ParentComponent。有了this.$slots[0][0].context.$children[0].$children[1]我实际上可以访问 ChildComponent 及其功能，但这似乎很迂回（获取渲染插槽的父级然后获取该父级的子级的子级......）

有没有更好的方法ChildComponent从提供该插槽（此处，）的组件访问在插槽（此处，）内呈现的组件（的功能UtilComponent）？

我有以下 vue 组件

我不明白范围界定问题。this插槽模板中的 是，null我无法访问this.total数据属性。不过，我可以在插槽模板之外使用该属性。为什么this插槽模板内为空？