深入Vue.js：父组件控制子组件v-if的渲染机制

在Vue.js应用中，常使用props传递数据，控制子组件的显示/隐藏。本文重点分析：父组件通过props控制子组件根元素的v-if指令，子组件渲染过程及生命周期变化。

父组件传递布尔值visible给子组件，控制其根元素的v-if。这与直接在父组件使用v-if控制子组件实例化不同。

父组件示例中，按钮切换visible值，从而控制子组件显示。子组件接收visible作为props，应用于根元素的v-if。

立即学习“前端免费学习笔记（深入）”；

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

初始状态visible为false，子组件未显示。然而，开发者工具显示子组件生命周期钩子已全部执行一次。这与预期（v-if为假，组件不创建）不同。

关键区别在于：通过props控制子组件根元素v-if，与父组件直接用v-if控制子组件实例化不同。前者仅控制子组件根元素渲染，visible为false时，组件实例仍然存在，只是内容不显示。因此，子组件生命周期钩子在组件实例创建时执行一次，而非v-if条件变化时重复执行。

若在父组件使用v-if直接控制子组件，则情况不同。v-if为false时，子组件实例被销毁；为true时，创建新实例，导致生命周期钩子在条件切换时执行。

因此，使用props控制子组件根元素v-if，组件实例创建和销毁只发生一次，v-if仅控制DOM元素渲染，而非组件实例生命周期。 需监听visible变化并执行操作，可在子组件内使用watch监听visible属性变化。