Vue render函数中的slot插槽属性怎么使用

Question

按照vue文档上所说里面的v-slot:child应该是能渲染的，但是现在我这样写却没有渲染出这个插槽组件，请问如何才能在渲染函数中使用slot属性？

<parent-node>

  <template v-slot:child>子组件插槽</template>
  <span>默认插槽</span>

</parent-node>

var childNode = {
props: {

},
data () {

return {
  user: { name: '小明的爸爸' }
}

},
render: function (creatElement) {

return creatElement(
  'div',
  {
    attrs: {
      id: 'child_id'
    },
    slot: 'child'
  }
)

}
}

var parentNode = {
render: function (createElement) {

return createElement('div', { attrs: { id: 'parent_id' } }, [createElement(childNode), this.$slots.default])

}
}

export default parentNode

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

组件插入的插槽都在其$scopedSlots中，作为一个函数暴露出来了
this.$parent.$scopedSlots.default() 这样调用，作用域插槽的话还可以传参。

Answer 2

你的嵌套好像有点乱，那个调用 v-slot:child插槽其实是在调用parentNode 的名为child的插槽，你的childNode 组件其实已经在parentNode 的createElement(childNode)中插入了，其实可以写成下面的方式：

var childNode = {
props: {

},
data () {

return {
  user: { name: '小明的爸爸' }
}
},
render: function (creatElement) {

return creatElement(
  'div',
  {
    attrs: {
      id: 'child_id',
      class:'212'
    },
  },
  this.$slots.child
)
}
}

var parentNode = {
render: function (createElement) {

return createElement('div', { attrs: { id: 'parent_id' } }, [this.$slots.default])
}
}

export  {parentNode,childNode}

然后像你那样子调用

<parentNode>
      <childNode>
        <template v-slot:child>
          <div>子组件插槽</div>
        </template>
      </childNode>
      <span>默认插槽</span>
</parentNode>