如何通过 props 将对象中的 render 渲染为组件

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1097 天前的主题，其中的信息可能已经有所发展或是发生改变。

  {
    type: 'radio',
    formItemProps: { label: useI18nt('test') },
    model: 'test',
    slots: [
      {
        name: 'default',
        render: () => [
          h(NRadioButton, { size: 'large', value: 1, label: '1' }),
          h(NRadioButton, { size: 'large', value: 2, label: '2' })
        ]
      }
    ]
  }

<component is='radio'>
  How would you render a slots from an object here by passing props
</component>

2 条回复

chenjiangui998

2022-10-31 11:16:31 +08:00

{
type: 'radio',
formItemProps: { label: useI18nt('test') },
model: 'test',
slots: [
{
name: 'default',
render: () => [
h(NRadioButton, { size: 'large', value: 1, label: '1' }),
h(NRadioButton, { size: 'large', value: 2, label: '2' })
]
}
]
}

<component is='radio'>
<component v-for="slot in slots" :is="slot.render" :key="slot.name"/>
</component>

试试这样, 不行就把 setup 去了, 用 render 函数

linkopeneyes

2022-10-31 20:32:51 +08:00

vue 的 script lang 是可以为 tsx 的，这样你直接把变量当组件也是可以的