在 vue 中渲染 div答案

【问题标题】：Render div in vue在 vue 中渲染 div
【发布时间】：2021-06-06 04:19:29
【问题描述】：

我正在尝试学习 Vue 的 render() 函数来制作页面组件。目前我有这个并且它有效：

function createDiv (h, msg) {
  return h('div', msg)
}

new Vue({
  el: '#q-app',
  data () {
    return {
      text: ''
    }
  },
  render (h) {  
    return createDiv(h, 'msg')
  }
})

但是当我将render() 内容更改为：

  render (h) {
    const arrSample = ['Hey', 'Hi', 'There']
    
    arrSample.forEach(msg => {
      return createDiv(h, msg)
    })
  }

然后它不再渲染任何东西。

谁能帮忙解释一下？

这是一个示例代码笔： https://codepen.io/keechan/pen/vYyVGrR

谢谢！

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

问题是你没有从你的render 函数返回任何东西。你只是在创建div 的VNode。你需要返回一些东西?
试试这个：

render(h) {
  const arrSample = ['Hey', 'Hi', 'There']

// map returns your data wrapped by div
  const list = arrSample.map(msg => {
    return createDiv(h, msg)
  })

// reason why we render the list in wrapped div is because
// you should return a single root node from `render` function.
  return createDiv(h, list)
}

Link to codepen

【讨论】：