时间戳

首页 > 解决方案 > 动态渲染功能子组件

typescript - 动态渲染功能子组件

问题描述

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

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

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

<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元素。

我错过了什么？

谢谢！

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

标签： typescriptvuejs2

解决方案

<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"])]);
            }
          }
        }
    }

推荐阅读