You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vue2渲染函数:非作用域具名插槽的转换方法咨询

Vue 2 非作用域命名插槽的渲染函数转换方法

对于非作用域的命名插槽(比如示例中的slotName插槽),在Vue 2的渲染函数中依然通过scopedSlots选项定义,区别在于非作用域插槽的函数不需要接收props参数,直接返回对应的VNode即可。

原模板代码

<div><child v-slot:slotName><span>...</span></child></div>

对应的渲染函数代码

render: function (createElement) {
  return createElement('div', [
    createElement('child', {
      scopedSlots: {
        // 命名插槽的名称对应slotName,函数无需接收props
        slotName: function () {
          return createElement('span', '...')
        }
      }
    })
  ])
}

补充说明:Vue 2中,不管是作用域插槽还是普通命名插槽,都统一在scopedSlots对象中定义。普通插槽因为不需要接收组件传递的props,所以插槽函数不需要参数,直接返回要渲染的内容即可。

内容的提问来源于stack exchange,提问作者binaryfunt

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.14 06:50:15