javascript - Vue 2 : How to render Single File Components from Render Functions?

Question

我正在尝试从渲染函数渲染单个文件 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 组件？如果它有所作为，我也会使用哈巴狗。

Answer 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 在评论中指出的内容。 h(Child) 创建一个子组件。从技术上讲，它创建了一个虚拟 Node ，Vue 使用它来呈现组件的实例。

所有这些都涵盖得很好 in the documentation .