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

我试图从渲染函数呈现单个文件VUE组件，但它不被创build。 我尝试了类似的变化：

// 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> 

我怎样才能从渲染functionbuild立Vue组件？ 如果它有所作为，我也使用帕格。

Answer 1

如果我理解正确，那么您只需要渲染可能从渲染函数写入单个文件组件的组件。 这很容易做到。

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

Child.vue

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

我想从使用渲染function的组件渲染。 这是一个例子。

Parent.js

 import Child from "./Child.vue" export default { render(h){ return h("div", ["Text in Parent", h(Child)]) }, components: {Child} } 

这是一个工作的例子 。

需要注意的重要部分是，当您要呈现组件时，只需将组件定义作为第一个parameter passing给createElement函数（以h为别名）即可。 @Phil在评论中指出了这一点。 h(Child)创build一个子组件。 从技术上讲，它创build了一个虚拟节点，Vue用它来渲染组件的一个实例。

所有这些在文档中都有很好的介绍 。