自定义组件未能正确渲染

[Bai-Xiaoguang]

这个样例里的自定义组件MySelect和MyCheckbox为什么没有正确渲染呢？

[cjboy76]

One possible solution here,
you can replace the string name with registered component Object.

import MySelect from './MySelect.vue'
import MyCheckbox from './MyCheckbox.vue'
 

const configs = [
  {
    type: MySelect,
    options: [
      {label: '下拉选项1', value: 'select1'},
      {label: '下拉选项2', value: 'select2'},
      {label: '下拉选项3', value: 'select3'},
    ]
  },
  {
    type: MyCheckbox,
    options: [
      {label: '复选选项1', value: 'checkbox1'},
      {label: '复选选项2', value: 'checkbox2'},
      {label: '复选选项3', value: 'checkbox3'},
    ]
  },
]

[Magic462]

这里的一个可能的解决方案是，你可以将字符串名称替换为已注册的组件 Object。

import MySelect from './MySelect.vue'
import MyCheckbox from './MyCheckbox.vue'
 

const configs = [
  {
    type: MySelect,
    options: [
      {label: '下拉选项1', value: 'select1'},
      {label: '下拉选项2', value: 'select2'},
      {label: '下拉选项3', value: 'select3'},
    ]
  },
  {
    type: MyCheckbox,
    options: [
      {label: '复选选项1', value: 'checkbox1'},
      {label: '复选选项2', value: 'checkbox2'},
      {label: '复选选项3', value: 'checkbox3'},
    ]
  },
]

赞同，在 configs 数组中使用的 type 字符串应该是组件的引用，而不是字符串