ts写法及ui组件封装记录之el-input

前两天尝试了一下自己对element-plus进行二次封装, 发现对ts的写法极度不习惯导致不停冒红线,恰巧昨天看到了一个比较有意思的input封装的文,所以来尝试一下用ts写法进行封装.

有热心大佬有更好的方法或者有趣的奇怪的需求也希望能够指点一二 万分感谢!!!

本次封装想要实现的效果:

1.调用时能够方便的获取input输入的内容,并且如果在一个页面中多次调用这个input组件能够把数据组合在一起成一个对象. 

2.能够方便的传入校验方法以及提示信息,完成输入框的校验提示

----------------------------------------------------------分割线--------------------------------------------------------------

开始封装第一步永远是上element-plus复制粘贴.

父组件获取封装组件input的值非常简单:

父组件中v-bind绑定数据,v-on绑定emit方法. 子组件通过defineProps接收属性,defineEmits注册方法,把el-input组件绑定的input值默认设置为传入的属性

给组件绑定input事件,输入东西时用emit通知父组件更改属性就好