问题标签 [vuejs-slots]

我目前在将原始 HTML（实体表单）传递到语法高亮的插槽时遇到问题。

想象一下有这样一个插槽；

我收到错误

这归结为{{ product.title }}- 删除它并且它工作正常。

无论如何我可以告诉实例停止尝试呈现这些“属性”，因为它会被解释为纯文本？

问候

我正在构建一个小型库，它允许从其他组件中修改应用程序布局的一部分。

基本思想是拥有一个主要的导航组件：

然后组件可以注册其他内容：

我已经设法使上述工作正常工作，使用自定义插件和服务对象将插槽注册（和更新）为 ContentFor 中定义的 VNode 并将其呈现在容器中。我现在想通过允许用户根据给定的内容添加自定义布局来增强它，例如：

这将很好地将视图组件与导航结构分离。我尝试了以下方法：

当没有自定义模板时，上述工作正常。当存在自定义模板时，它会呈现该模板，但不会将内容传递到模板的插槽，从而导致：

是否有任何特定的方式可以将范围传递给其他范围？

目前，我有一个父组件，它渲染一个子组件，并且还将一个组件（模态，称为 Modal.vue）作为插槽传递给子组件。

父.vue

孩子.vue

模态的.vue

我的问题是，如何在我的插槽组件中访问孩子的数据（和功能）？

我一直试图让它与作用域插槽一起工作，但似乎无法破解语法。

我想Card使用 vue 创建一个组件，该组件具有使用vuejs 插槽 api的标题和内容部分。

我无法理解如何在 Card 组件中创建结构。卡片应包含所有线框样式（填充和边距），但可以从使用该组件的子模板扩展。

我想知道是否有任何标准方法可以从子组件中为带有插槽的包装器元素设置样式。

基本Card元素有 2 个插槽，其中包含结构元素，我希望允许子模板在必要时进行修改。

理想情况下，我想为元素添加一个:class属性，#slot并在插槽中的元素上使用该属性，但是，旧语法似乎在最新版本的框架中已被贬低，例如。

我可以想到 3 种可行的方法，每种方法都有其缺点。

1. 使用 props 通过根元素添加一个类
2. 在根元素上使用类并在组件元素上使用样式挂钩
3. 将插槽内容包装在另一个元素中

我的项目必须使用 css-modules 来减少尽可能多的全局 css，因为它在过去给我带来了如此多的悲痛。

1.使用props通过根元素添加一个类

这种方法将允许我使用 css-modules 并使Card元素打开以进行扩展

组件模板需要从子模板中组合额外的样式

然后子模板可以:header-classes用来扩展基本的 Card 类，或覆盖不需要的样式。

2. 在根元素上使用类并在组件元素上使用样式挂钩

模板将需要分配额外的类，这些Card类可用于扩展组件的基本结构组件。不应使用 css-module 类，因为名称经过哈希处理以避免冲突。

然后可以将单个类添加到组件中，并且可以使用额外类的样式

3. 将槽内容包裹在另一个元素中

我认为这种方式违背了插槽的目的，它会导致我需要从Card.

由于旧插槽已折旧，是否有任何标准方法来处理这些情况？我是否错过了文档中的某些内容，我只玩了几天 vue，所以这绝对是可能的。

如果您需要提供任何示例，下面的代码片段中有完整的示例以及工作代码。

谢谢你的帮助！

我正在使用 Vuejs。我创建了两个组件：First和Second.

1. First呈现Second.
2. Second有一个命名槽。
3. First包含一个<template>, 进入Second的命名槽。
4. 在First's <template>- 还有另一个命名的插槽。
5. 在Second's内部<slot>- 有一个<template>, 进入First's<template>的命名槽。

我得到的是First'在' 插槽<template>内渲染。Second

这是正确的，但我也希望看到Second'在of中<template>呈现。但我没有。<slot>First<template>

这是代码：

这是输出：

这是 jsfiddle：https ://jsfiddle.net/obeobe/f98kr4ye/

我想得到这个输出：

我可以通过插槽实现这一点吗？如果没有，是否可以通过另一种方式实现，但不创建第三个组件？

编辑：一个可能的现实用例：一个 List 组件，它允许每个项目的 HTML 内容由其主机定义，并且可以在主机指定的位置将其自己的一些内容注入到主机的内容中。

例如，像这样：

主机组件：

“列表”组件：

如何访问在我的输入元素中输入的数据，这些数据通过一个插槽传递给我的子组件，该子组件打开一个包含表单元素的模式？

我一直在阅读有关作用域插槽的 vue 文档，但老实说，我只是无法弄清楚如何在我的示例中使其工作。这些示例都没有使用带有正在传递给子组件的 v-model 的输入元素。

我创建了一个包含以下代码的组件“BaseFormModal”：请注意，验证（vee-validate）发生在此处，因此当数据被认为有效时，此子组件会发出“提交”事件，然后我将其拾取我的父组件。

在我的页面中，我有一个打开模式的按钮，如下所示：

然后我在我的页面中定义了基本表单模式组件：

我有一个由多个父组件使用的子组件，其中包含一个 Vuetify v-data-table，并且部分数据表使用该body.prepend插槽。在这种特殊情况下，表结构用于设置一些选择列表，并且为了与列标题对齐，它使用以下colspan值：

但是，colspan值需要在实现之间有所不同，所以我想传入一个 prop 值（numBlankHeaders上面的值）。根据props 文档页面，你必须使用v-bind告诉 Vue 这是一个 JS 表达式而不是字符串，所以我这样定义 prop：

然后我像这样传递它：

但是，我作为道具传入的值根本没有生效，无论我是使用默认值还是像上面那样传入一个值。在初始代码片段中使用了其他道具（例如<td v-if="showPracticeFilter">），所以我知道道具正在插槽内使用。我需要改变什么才能让我的numBlankHeaders道具发挥colspan价值？

如何使用 a 的结果v-if在 Vue 中渲染两个不同的组件？如果重要的话，我也在尝试在渲染TreeViewusing时这样做v-for。这是我到目前为止所尝试的。

树视图.vue：

App.vue（Bookmark标签是我构建的自定义组件，没有计算属性isFolder）：

当我运行它时，出于某种原因，v-if="!child.isFolder"TreeView.vue 中的总是评估为 true，因此它呈现 Bookmark 组件。即使在v-if给定 的“子文件夹 1”子对象时应该评估为 false的情况下treeData，它仍然评估为 true。我感觉问题与我的使用方式<slot></slot>有关，TreeView.vue但我不确定。为什么v-if总是评估为真而从不为假？

问题也可能与我编写isFolder属性的方式有关。

我有一个组件 ( prism-editor)，它只从v-model="code". 这意味着，代码必须通过以下方式发送到组件code：

代码.vue

我想Code从一个插槽命名的父组件绑定它：

页面.vue

在我的Code组件中，我必须找到一种方法来获取插槽数据并将其直接传递code给要发送到v-model='code'. 不幸的是，以下不起作用，因为我不知道如何从父级获取数据slot：

换句话说，我只想获取code标签内发送的所有原始内容：

这可能吗？

我使用Innologica/vue2-daterange- picker v0.4.3，它在没有范围插槽的情况下工作正常。我想通过遵循官方文档来添加范围插槽（对我们如何使用范围插槽进行了简单的复制粘贴）：

我可以看到 UI 的变化，但是当我点击范围时，我得到了这个错误：

在我的 IDE 中，如果我“cmd+click”clickRange( )函数，我可以看到第三方源代码，这意味着函数存在。

有没有人遇到过类似的问题，你是如何解决的？