需求
主页点击按钮打开弹窗,弹窗为子组件,主页为父组件。弹窗复用,有“复制弹窗”和“重命名”弹窗。两种弹窗除了弹窗名字不同,“复制弹窗”需要实现文件名称的初始值加上_副本的文字。
父子组件绑定
- 父子组件对应的 vue 文件位置
2.写入子组件的三部曲
- 父组件传出参数
- 子组件接收参数
bug 出现
主页点击打开“复制弹窗”后关闭,再次打开“重命名弹窗”,fileName会显示_副本;顺序相反效果相反。
bug 修复
问题的关键在于:我们需要一个可以 在每次打开弹窗都执行的函数,在里面进行初值设置就好
使用 updated 生命周期函数
值得注意的是:
created和mounted两个生命周期函数无法修复该 bug,因为每次打开该弹窗只能触发一次该事件watch方法也不能解决该问题,只能解决表格中不同行之间弹窗的初值更新,不能解决同一行之间不同类型的弹窗的初值更新