需求描述:
此次需要在父组件的抽屉中点击确定按钮,更新筛选项的值,进而更新子组件的数据。
页面中包含四个子组件,分别是项目维度甘特图、人员维度甘特图、项目维度日历、人员维度日历。每个组件的需要的数据在组件内请求获取,父组件提供请求所需的参数(日期范围、项目ID、执案人ID)。
为了触发子组件的数据获取事件,可以给被引用的子组件添加key,key值为Date.now(),在点击确定按钮时,给key重新赋值最新的Date.now(),此时子组件中的方法会被重新触发。
原理: key值变化之后,会自动重新渲染组件; vue中的key的作用主要是为了高效的更新dom, 它也可以用于强制替换元素/组件而不是重复使用它,完成的触发组件的生命周期钩子,触发过渡。