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

我想念什么？

谢谢！

P.S。我还希望能够使用v-for指令来呈现这些类型的组件的数组，因此，最适合这种情况的解决方案。再次感谢。

Answer 1

const browserSync = require('browser-sync').create();
const reload = browserSync.reload;

// Logs Message
gulp.task('message', function(){
  return console.log('Gulp is running...');
});

// Start BrowserSync
gulp.task('browser-sync', function(){
  console.log("test");
  browserSync.init({
    proxy: 'http://localhost:3000'
  })
});

gulp.task('default', ['message', 'browser-sync', 'watch']);

gulp.task('watch', function(){
  gulp.watch('*').on("change", reload);
});

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

此外，<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>的值应为字符串或选项对象，如下所示： https://vuejs.org/v2/guide/components.html#Dynamic-Components 因此，代替上面的代码，应该做得更好。

:is

动态呈现功能子组件

1 个答案: