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

› Vue.js

This topic created in 1297 days ago, the information mentioned may be changed or developed.

  {
    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 replies

chenjiangui998

Oct 31, 2022

{
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

Oct 31, 2022

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