问题背景:
1. 多个父组件复用一个子组件,不同条件下要对父组件进行切换(v-if、v-show),称这些父组件为不同属性页。
2. 其它组件有更改时,要对属性页进行更新,要更改的组件与属性页没直接关系,所以设置一个状态管理变量来管理属性页是否更新,并在属性页中进行监听,当其它组件更改时,更改这个变量,从而更新属性页。
3. 监听函数放在子组件中,当变量改变时,子组件触发父组件更新函数,从而对属性页进行更新。
那么,使用 v-if 还是 v-show 对属性页进行条件渲染呢?
- 在这里先介绍一下 v-if 和 v-show
- v-if:条件块内的事件监听器和子组件会被销毁和重建。只有初始条件是 true 时才会渲染。
- v-show:不管初始条件是啥,元素总会被渲染,切换只是简单地基于CSS进行切换。
- 解决思路描述
- 频繁的属性页切换适合用v-show。但是如果用 v-show,那么监听子组件触发父组件函数时,无法触发到目前正在show的这个父组件的函数,也无法同时触发多个父组件函数(当然也不想这样做)
- 使用 v-if 当然可以,但是由于多人开发,有一个属性页它并不能被销毁,不然会报错,所以该属性页必须得用 v-show
- 对于绑定了 ref 的属性页,也必须要用 v-show 啊,但是只能有一个 v-show(如果有两个就又会出现第一个问题),于是在用到这个组件 ref 的时候,使用 setTimeOut 让它去注册一下。
感觉出这个设计模式并不好,请问有更好的设计方法吗?