Vue 2：如何从渲染函数渲染单个文件组件？

Posted 2023-02-22

【中文标题】Vue 2：如何从渲染函数渲染单个文件组件？

【英文标题】：Vue 2: How to render Single File Components from Render Functions?

【发布时间】：2018-05-04 08:58:28

【问题描述】：

我正在尝试从渲染函数渲染单个文件 Vue 组件，但它没有被创建。我尝试了类似的变体：

// simple.vue
<template>
...
</template>
<script>
 ...
</script>

// parent.vue
<script>
import Simple from 
export default 
  name: "parentComponent",
  render: function (h) 
    return h(
      "div",
      null,
      Simple  // [Simple], Vue.component(Simple)
  

</script>

如何从渲染函数构建 Vue 组件？如果它有所作为，我也在使用哈巴狗。

【问题讨论】：

我不明白。如果您有渲染功能，则不需要单个文件组件。

vue-cli webpack模板中的示例使用render: h => h(Simple)

@Bert 基本上我的用例是我有一个需要（或已经写入）渲染函数的组件，但它的子组件不需要。与模板相比，继续在渲染函数中编写这些会更麻烦。

@Phil 嗯，我在 vue-cli 的主自述文件中没有看到它。你有链接吗？你将如何传递 props 并指定其他属性？

【参考方案1】：

如果我理解正确，您只是想从渲染函数渲染可能被编写为单个文件组件的组件。这很容易做到。

假设我有以下单个文件组件。

Child.vue

<template>
  <h1>This is the Child component</h1>
</template>

我想从一个使用渲染函数的组件中渲染它。这是一个例子。

Parent.js

import Child from "./Child.vue"

export default 
  render(h)
    return h("div", ["Text in Parent", h(Child)])
  ,
  components: Child

这是working example。

需要注意的重要部分是，当您要渲染组件时，只需将组件定义作为第一个参数传递给createElement 函数（上面别名为h）。这就是@Phil 在 cmets 中指出的。 h(Child) 创建一个子组件。从技术上讲，它创建了一个虚拟节点，Vue 使用它来渲染组件的实例。

所有这些都很好in the documentation。

【讨论】：

好吧，我只是太傻了，实际上已经在这样做了，但是在将子组件导入到 components 对象中之后，就像 h('child-component-name', ... ) 一样打破了它。