动态渲染功能子组件

Question

我需要渲染从函数返回的组件（即动态创建的）。

我的问题是，我该怎么做？

我曾尝试在父组件中做这样的事情：

<template>
  ...
  <component :is="aboutUsParagraphs()" />
</template>

函数调用将返回一个这样创建的函数组件：

Vue.component("app-about-us", {
  functional: true,
  render(createElement: CreateElement) {
    return createElement("div",
               createElement("p", ["Something about us"]));
  }
});

这编译得很好，我在控制台中没有任何错误，但是当我查看 DOM 时，我只看到一个空的 div 元素。

我错过了什么？

谢谢！

附：我还希望能够使用v-for 指令来呈现这些类型的组件的数组，因此最优选允许这样做的解决方案。再次感谢。

Answer 1

<div id="dynamic-component-demo" class="demo">
  <template>
    <component :is="aboutUsParagraphs()" />
  </template>
</div>

<script src="vue.js"></script>
<script>

  new Vue({
    el: '#dynamic-component-demo',
    data: {
    },
    methods: {
        aboutUsParagraphs(){
          return Vue.component("app-about-us", {
              functional: true,
              render(createElement) {
                return createElement("div",
                  [createElement("p", ["Something about us"])]);
              }
          });
        }
    }
  })
</script>

这对我有用。 createElement 函数的参数可以参考https://vuejs.org/v2/guide/render-function.html#createElement-Arguments。

此外，:is 的值应该是字符串或选项对象，如下所述： https://vuejs.org/v2/guide/components.html#Dynamic-Components 所以代替上面的代码，下面应该会更好。

  new Vue({
    el: '#dynamic-component-demo',
    data: {
    },
    methods: {
        aboutUsParagraphs(){
          return {
            functional: true,
            render(createElement) {
              return createElement("div",
                [createElement("p", ["Something about us"])]);
            }
          }
        }
    }