Vuejs2 为什么我的嵌套组件不呈现？

使用

VueJS

（）提供的渲染功能，可以执行以下操作：

render(h, context) {

  let children = [];
  children.push(h("span", "test nested span"));
  return h(
    "span",
    children
  )      
}
// results in <span><span>test nested span</span></span>

渲染（h，上下文）{
让孩子们=[]；
推（h（“span”，“测试嵌套span”）；
返回h(
“跨度”，
儿童
)      
}
//测试嵌套跨度的结果

但是，如果我尝试将配置数据传递给父级，则它不起作用：

render(h, context) {

  let children = [];
  children.push(h("span", "test nested span"));
  return h(
    'span', {
      domProps: {
        innerHTML: "parent"
      },
      style: "...",
      class: "..."


    },
    children        
  )      
}
// results in <span>parent</span>

渲染（h，上下文）{
让孩子们=[]；
推（h（“span”，“测试嵌套span”）；
返回h(
"span",{
domProps：{
innerHTML：“父级”
},
风格：“…”，
类别：“…”
},
儿童
)      
}
//结果是父母

我做错了什么

更新

---

所以我认为这里发生的是

innerHTML

的使用，它覆盖了子元素，因为它们在技术上是

innerHTML

的一部分。但我的目标还是一样的。我希望能够使用

innerHTML

，因为它允许原始html，而且我还希望在它之后渲染子对象。

您可能正在传递一个函数

render

，而不是数组

render

。如果您将

let render=[]

更改为

let children=[]

则效果更好。我甚至手动添加了子元素。如果我将参数

{domProps，etc.}

传递给父元素，则忽略子元素。我已经更新了我的问题以帮助澄清。好吧，尽管如此，我认为这就像你说的那样-domProps具有更高的优先级，因此，即使可能会呈现子对象，它们稍后也会被innerHTML覆盖。为什么在呈现函数中需要原始html？我有一个相当高级的应用程序，我允许最终用户通过配置

json

来填充组件，并且由于有许多调整，

dom

会被我不愿意出现的标记弄得一团糟（从语义上讲）为了帮助清理这个问题，我想在一些没有周围元素的地方渲染内容，并且需要允许原始（可信）内容的能力。因此，我的问题/示例是一个淡化的简单示例，有助于实现更大的目标。最重要的是，把事情弄清楚很酷。