小技巧系列 -- vue 父子组件绑定及弹窗初值问题

1,214 阅读1分钟

需求

主页点击按钮打开弹窗,弹窗为子组件,主页为父组件。弹窗复用,有“复制弹窗”和“重命名”弹窗。两种弹窗除了弹窗名字不同,“复制弹窗”需要实现文件名称的初始值加上_副本的文字。

image.png

image.png

父子组件绑定

  1. 父子组件对应的 vue 文件位置

image.png

2.写入子组件的三部曲

image.png

  1. 父组件传出参数

image.png

  1. 子组件接收参数

image.png

image.png

bug 出现

主页点击打开“复制弹窗”后关闭,再次打开“重命名弹窗”,fileName会显示_副本;顺序相反效果相反。

bug 修复

问题的关键在于:我们需要一个可以 在每次打开弹窗都执行的函数,在里面进行初值设置就好

使用 updated 生命周期函数

image.png

值得注意的是:

  • createdmounted 两个生命周期函数无法修复该 bug,因为每次打开该弹窗只能触发一次该事件
  • watch 方法也不能解决该问题,只能解决表格中不同行之间弹窗的初值更新,不能解决同一行之间不同类型的弹窗的初值更新

image.png

image.png