Vue3组件（17）给表单控件设置一个插槽

表单的自定义子控件

表单封装之后就会遇到一个古老的问题，需要放进去一个新类型的子控件怎么办？

这在以前都是很头痛的问题，如果是需要修改封装好的代码才可以实现的话，那就太郁闷了。

但是现在在Vue里面，至少有两种解决方案，还都挺优雅的。

用插槽设置自定义组件

Vue的组件有插槽这个功能，一开始还没想起来，这的多谢好友“我滴神”的提醒，才想起来可以用插槽。好吧其实是我以前还不会用插槽。。。

研究了一下官网，又结合 el-input 设置的插槽理解了一下，发现还不难，于是给表单控件设置了这样的插槽。

在原先v-for循环的基础上，加上一个判断，根据meta的controlType 来判断，如果=== 1 好的，那么就是要用插槽，然后把控件ID设置给插槽的name属性，这样就可以按照控件ID来加载外部指定的插槽了。

外部使用方法

父组件首先要设置好插槽，这个就可以很随意了，插槽嘛就是可以各种各样的，我们先来个简单的。

用 template 设置好控件ID，这样可以设置多个插槽。

然后再设置一下表单的meta即可

 // 设置使用插槽的表单子控件
    meta.itemMeta[102].controlId = 102
    meta.itemMeta[102].colName = '属性名称'
    meta.itemMeta[102].controlType = 1

属性的具体内以后在介绍，总之，不用改表单控件的内部代码，就可以实现随意往里加新的子控件的需求了。

支持验证等功能吗？

测试了一下，支持各种功能，表单数据验证、排序、占位等都是支持的，和表单自带的子控件是一样的功能。
只是 v-model 需要外部设置一下。

这些还要感谢 Vue 和 UI库的强大。

$ref怎么处理？

element的官网例子里面，重置表单用的是Vue2的方式，正巧在Vue 官网看到了$ref的用法，于是改成了Vue3的方式实现重置表单的功能。

// Vue2 的方法
methods: {
  resetForm(formName) {
    this.$refs[formName].resetFields();
  }
}

// Vue3的方法
// 获取 $ref
  const formControl = ref(null)
  onMounted(() => {
    console.log('表单dom', formControl)
  })

  const resetForm = () => {
    // 清空表单
    formControl.value.resetFields()
  }

这样表的控件就更完善了，另外，过了几天再看代码，居然看不懂了。

源码

https://github.com/naturefwvue/nf-vue-element

最后水一张难看的图片

010表单插槽.png