关于el-dialog的抽取问题
来源：7-5 用户新增实现
Tommy0714
2023-06-30
老师, 我知道你在课程里面是没有怎么抽取封装组件的, 很理解你吧…就是我现在个人想尝试抽取成一个组件, el-dialog是基于v-model的变量, 封装成一个组件传入之后绑定就遇到了一些问题.
问题
- prop不能作为v-model的变量
- 然后我尝试在封装组件中创建本地变量
isShowModal, 用computed去返回props.showModal, 之后v-model="isShowModal"却发生了dialog弹出窗口和页面重叠的现象
所以问下您, 如果你来抽取组件, 遇到这种问题该怎么解决? 因为我用prettier的话, User的文件写到这都有250行了
写回答
2回答
-
河畔一角
2023-06-30
弹框用到的所有变量都在弹框组件里面定义，比如：visible，提交事件，取消事件，弹框标题和宽度等。
其次，弹框里面定义一个open函数，接收一个object对象，用于给父组件调用并传参。
第三：父组件通过ref调用子组件的open函数，打开弹框，可以把标题，以及需要用到的参数传递过去。
第四：弹框组件提交以后，通过emit回传给父组件。
10 -
河畔一角
2023-06-30
上面说的是一个业务组件，自带弹框的封装。如果你要纯粹封装一个弹框组件，那略有不同。
组件里面需要定制插槽，用来接收外面的业务代码，弹框的提交和取消事件通过emit传出来，再外面使用弹框组件的时候，通过@submit进行定义和调用。
00
相似问题