前端 - vue 公共组件选择器多次引用，怎么控制显示隐藏？

Question

<custom-selectors        class="asleep_time"        :showPanel="isShowPanel"        :optionData="xxx"        @updateSel="xxx"      >      </custom-selectors>

Answer 1

这个问题是在询问如何在Vue中控制公共组件（或自定义组件）的显示和隐藏。在Vue中，我们可以使用v-if或v-show指令来控制元素的显示和隐藏。

v-if和v-show指令都会根据表达式的值来决定是否渲染元素，但是他们之间的区别在于：

• v-if是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。
• v-show简单地根据表达式的值切换元素的CSS的display属性，元素始终会被渲染，并且只是简单地基于CSS进行切换。

在你的代码中，你已经使用了v-if来控制一个组件的显示和隐藏，这是基于isShowPanel的值。例如：

<custom-selectors    class="asleep_time"    :showPanel="isShowPanel"    :optionData="xxx"    @updateSel="xxx"></custom-selectors>

这里的:showPanel="isShowPanel"就是用来控制custom-selectors组件的显示和隐藏的。isShowPanel是一个布尔值，当它为true时，组件会被渲染并显示；当它为false时，组件不会被渲染或者被隐藏。

注意，当isShowPanel的值改变时，Vue会自动重新渲染这个组件，这就实现了对组件显示和隐藏的控制。