问题标签 [vue-render-function]

在https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth的 Vue 文档中，有对“on”和“nativeOn”的解释：

我们正在尝试从我们创建的自定义组件中侦听“输入”事件。我们注意到在 on 属性中没有检测到该事件，因此我们尝试了 nativeOn 并且我们惊讶地发现这有效。我们很惊讶，因为文档说 nativeOn：

允许您收听 // 本地事件，而不是使用 vm.$emit 从组件发出的事件 //

在这种情况下，我们使用 vm.$emit 从（自定义）组件发出的事件。

这是我们的代码片段，展示了上述内容：

任何关于我们为什么需要 nativeOn 来监听来自自定义组件的“输入”事件，或者何时使用 nativeOn 与 on 以及其中的差异的任何说明都将不胜感激。提前致谢！

我有一个数组。在该数组中，我需要显示随机分量。就我而言，它是FeedbackComponent。它应该显示在数组中的最后两个对象之前。所以它应该是这样的示意图：

故事对象故事对象故事对象故事对象故事对象反馈组件故事对象故事对象

在不改变数组的情况下在列表中显示该组件的方法是什么？我一直在寻找 React 中可用的东西，比如在组件内渲染。

所以这是我的PortfolioComponent.vue，它由几个对象组成（存储在 json 数据中）

这是我的StoryComponent.vue的 html

希望这就足够了，我已经解释清楚了。

我有一个要连接到服务器后端的 Vue CLI 应用程序。
服务器将返回一个带有数据有效负载的视图模板，我想将该有效负载作为 JSON 作为数据属性注入到 Vue 应用程序中。

Vue CLI 生成的index.html文件如下所示（我设置filenameHashing为falseinvue.config.js以避免随机文件名）：

main.js如下所示：

我希望能够执行以下操作：

这样我就可以SiteContainer按如下方式访问数据：

我已经尝试过基本上做我上面写的，但是因为该render方法似乎完全用组件替换了#appdiv，所以该属性也丢失了。site-container:data

我还看到您可以将第二个参数传递给renderwith data，但我无法弄清楚如何使其工作，最终，它在 中main.js，而不是服务器将使用的视图模板文件，这是我需要的地方JSON 数据将其从服务器获取到 Vue 应用程序。

如何将数据从服务器生成的视图模板传递到 Vue CLI 应用程序以使一切顺利进行？谢谢你。

树：

我有 $validator 提供的Parent。在内部FnChild，我将渲染函数与其他异步组件（Target）一起使用。

注射存在于内部context.injections，但如何Target通过使用功能组件将其传递给？

我可以想象只将 FnChild 重写为非功能组件并provide: ['$validator']使用FnChild

UPD：正如答案中所指出的，您不需要在功能组件内进行任何注入/提供，它就可以工作。

$validator我的具体案例与每个组件中的 v-validate 和自动注入 new有关。在我的具体情况下，它是一个带有插槽的组件，它是覆盖的，$validator因为我没有inject: ['$validator']在它里面。结构很简单，如下所示：

家长

Parent 注入了验证器，但 ComponentWithSlot 没有注入，因此 v-validate 为 ComponentWithSlot 重新创建了新实例，并将其提供给 FnChild 而不是$validator来自Parent组件。

因此，一旦我添加inject: ['$validator']到ComponentWithSlot中，一切都很好，Target现在可以正确地$validator从Parent.

我在 svg 中有一个图标库（图标系统）。每个 svg 在 Vue 中都有自己的组件，就像Sarah Drasner 的图标系统一样。

我想将一个 svg 导入一个 js 库，该库只允许提供带有 url 的图标。我可以有一个单独的 svg 文件，但我想用我的颜色系统动态设置填充颜色。我发现的唯一方法是将组件渲染并编码为 base64。

我为 React 找到了一个简单的助手，但我正在努力用 Vue、Vue.Compile、Render 等来重现这个想法。

我有一个 JavaScript 函数，它返回一个 DOM 节点，该节点表示一个树视图，其中有许多嵌套节点，我想知道是否可以将该函数传递给 vue 渲染函数？

我知道我不应该弄乱 DOM 或者改用递归模板，但是为了学习和挑战自己，我仍然想弄清楚......如何在 Vue 中操作 DOM，在帮助下的渲染函数。

谢谢你的帮助。

我刚刚使用 Laravel 框架完成了我的项目。现在我想将 vue.js 添加到我的项目中以在不加载视图的情况下呈现视图。我浏览了一些教程，发现我需要将我的刀片文件转换为 Vue 组件来实现这一点。但据我所知，这是一个很大的过程，因为某些功能在 VueJS 中不起作用。而且我不知道该怎么做。请有人在这里指导我如何做到这一点。提前致谢。

在我的 Vue 应用程序中，我使用v-data-table，并且列值使用函数组件内的渲染函数呈现，如下所示：

然后在我的format函数（它是单独文件中对象的一部分）中，您可以使用它createElement来创建一个 hTML 元素并返回它。这是应用程序另一部分的示例：

因此，尽管如此，我正在尝试做一些相当复杂的事情，这是一个带有徽章的 Vuetify 图标。这是来自Vuetify 文档的代码。

作为起点，我可以很好地创建基本的徽章 HTML

这让我几乎到了那里，因为它显示了我的图标，并且它被元素包裹badge，尽管没有显示徽章内容：

我的问题是获取badge插槽的显示值。我错过了什么？

我对如何根据点击隐藏和显示 3 个 div 感到困惑。

我已经能够使用 v-show 显示和隐藏 2 个 div，但我认为 v-show 不适用于 2 个以上的 div。

这是我没有 vuejs 的代码，因为我不明白如何用 v-else-if 渲染

app.js 可能是这样的？

对不起，我明白这是一个基本问题，但如果你能指导我。我在文档中看到了关于 v-else-if 的内容，但我仍然不清楚如何应用它。我知道每个 div 都对其应用 display none ，当它被激活时它会消失。

所以基本上是这样，当我通过相应按钮访问的 div 被激活时，两个 div 不显示。

谢谢你。

我在理解递归组件时遇到了一些麻烦，我相信对于我想要完成的事情，这可能是最好的方法。这是到目前为止我所处的位置的小提琴，将在下面解释。

https://jsfiddle.net/wp0hon7z/2/

我试图遍历一个嵌套的 JSON，它本质上模仿了一个 DOM。每个“节点”看起来像这样。您可以打开小提琴以查看更多嵌套的 JSON 和

目前我能够递归地遍历并将每个节点创建到一个组件中，并将它们放入一个组件数组中，我在 Vue 实例中填充该数组。

问题是，子组件需要显示在父组件内。我在想也许用组件对象创建一个对象，然后使用递归组件来解析这些，但我不知道该怎么做。

另一个想法可能是创建一个带有父 ID 的平面组件数组？然后可能以某种方式使用它？

关于如何去做的一些指导会很棒，我认为递归组件会有所帮助，但不确定除了创建元素/渲染函数之外我还能如何使用它。每个节点都需要与类列表、属性列表、on 等进行 2 路绑定。我计划跟踪这些并使用状态/存储进行编辑，可能是 vuex。

目前在 Fiddle 中看到的代码将显示 JSON 中的所有组件，但没有嵌套，所以只是一个接一个。