微信小程序组件“隐身术”：替代hidden属性的奇幻之旅【含代码示例】

在微信小程序与uni-app的奇妙世界里，开发者们偶尔会遇到这样一个“魔法失效”时刻：当试图使用 hidden属性或uni-app的 v-show直接对自定义组件施加“隐身咒语”时，发现它们似乎对此无动于衷。别急，今天我们就来一场“寻宝游戏”，探索隐藏组件的正确姿势，让它们乖乖听话，上演一场精彩的“现身与消失”的表演。

一、基础概念：何为“隐藏”？

在前端开发中，隐藏元素是一项基本技能，它可以帮助我们控制页面布局的动态变化。微信小程序原生并不支持直接在自定义组件上使用hidden属性，而uni-app的v-show虽然在普通标签上效果显著，但面对自定义组件时却显得力不从心。这主要是因为自定义组件有自己的生命周期和渲染逻辑，直接作用于组件上的显示控制指令往往不会穿透到组件内部。

二、传统方案：属性传递法

示例一：显隐由我，属性传递

既然不能直接在组件外部控制显示，我们可以通过属性传递的方式，让组件自己决定是否显示。

父组件：

<my-component is-visible="{
    {isVisible}}"></my-component>

子组件（my-component）：

<!-- my-component.wxml -->
<wx:if="{
  {isVisible}}">
  <!-- 组件内容 -->
</wx:if>

<!-- my-component.js -->
Component({
  properties: {
    isVisible: {
      type: Boolean,
      value: true,
    },
  },
});

三、进阶技巧：slot与条件渲染

示例二：slot的隐形斗篷

利用slot和条件渲染，可以更灵活地控制组件内部部分的显示与隐藏。

子组件（my-component）：

<!--