动态组件(component)的高级使用
背景:在编写自定义表单时。遇到属性设置,需要动态生成页面。如下图这样的情况。类型名称需要是下拉框的类型。既然是动态的所以渲染要做成适配不同组件使用的级别。
- component渲染el-select组件路程。
- el-select包含双层组件。其实不熟悉component组件的使用时会觉得有点懵,因为el-select如果要使用,就得配合v-for和el-option数组一同渲染。
- 组件的嵌套。其实el-select中使用的el-option也是一个组件。那么组件之间的嵌套就可以想象成component动态组件的嵌套逻辑了。如下图:
- 拓展:上图中可以兼容不是el-select组件使用的情况。比如说可以兼容el-input输入框也是可以的。当option.options不存在或者options数组是空的,被嵌套的组件是不会执行的。
- 总结:开始也不太会使component,但发现大模型给提供的这种方式可行。突然觉得技术本身又博大精深了起来。