Question

我正在尝试使用功能组件来呈现多个元素，而不必具有单个根元素，但是我似乎无法访问组件data，请参见以下简化示例：

尝试访问context.data会记录一个空对象{}：

<div id="app">
  <hello />
</div>

Vue.component('hello', {
  functional: true,
  render: function(h, context) {
    console.log(context.data) // This logs {}

    return new Array(5).fill(1).map((_, index) => h('p', {}, 'Hello world'))
  },
  data () {
    return {
        foo: 'bar'
    }
  }
})

new Vue({
  el: '#app',
  data: function() {
    return {
      foo: '<p>foo</p>',
      bar: 'bar'
    }
  }
})

A working jsfiddle

预先感谢

Answer 1

功能组件没有数据，这就是为什么它在上下文中不接收List的原因。您可以在手册的this section中找到其他信息

如果您想渲染组件而不必使用单个根元素，则可以尝试vue-fragment。

访问功能性vuejs组件的render函数中的数据

1 个答案: