自定义组件是微信小程序开发中提高代码复用率的重要手段，而slot插槽则是组件灵活性的核心。很多场景下我们会给slot设置一段默认内容，当父组件没有传入内容时显示默认值，传入内容后显示自定义部分。但实际需求往往更复杂：有时希望根据某个条件决定显示默认内容还是外部内容，有时希望只替换默认内容的一部分而不是整体替换。本文将围绕这些场景，深入讲解slot默认内容的动态替换方案。
slot基础与默认内容的运行机制
首先需要明确slot的工作方式。在组件的wxml中写一个<slot>节点，外部使用组件时写在组件标签内部的节点就会被插入到slot的位置。如果外部没有传入任何内容，<slot>标签内部包裹的内容就会作为默认内容展示出来。这个机制很方便，但它的替换逻辑是全有或全无：外部只要传入了任意一个节点，默认内容就会整体消失。
看一个最简单的例子，组件模板如下：
<view class="card"> <!-- 外部未传内容时，显示这段默认文案 --> <slot>这里是默认的占位内容</slot> </view>
外部使用时，不写子节点就显示默认文案；写了子节点则默认文案完全被覆盖。问题在于，这种覆盖是编译期就确定的行为，无法通过一个data属性或条件表达式来控制什么时候用默认内容、什么时候用外部内容。要想实现动态替换，必须借助其他手段。
利用具名插槽加条件渲染实现动态切换
解决整体覆盖问题的常用思路是：不在<slot>内部写默认内容，而是把默认内容单独写成一段条件渲染的模板，与具名插槽并列，由一个开关变量控制谁显示。这样替换权就从编译期转移到了运行期。
组件模板改造如下：
<view class="card">
<!-- showDefault为true时渲染默认内容 -->
<block wx:if="{{showDefault}}">
<view class="default-content">默认的头部区域</view>
</block>
<!-- 否则渲染外部传入的具名插槽 -->
<slot name="header" wx:else></slot>
</view>在组件的js中定义showDefault，并根据组件属性或内部逻辑动态修改它：
Component({
properties: {
// 外部可控制是否使用默认内容
useDefault: {
type: Boolean,
value: true
}
},
data: {
showDefault: true
},
observers: {
useDefault(val) {
this.setData({ showDefault: val })
}
}
})使用这种方式时要注意一点：多具名插槽需要在组件js中开启options: { multipleSlots: true }，否则name属性不会生效。另外，wx:if会真正销毁和重建节点，如果切换频繁可以考虑用hidden代替，减少渲染开销，但hidden的节点仍会占用渲染树，两种方式按需选择。
只替换默认内容的一部分：分区插槽方案
整体替换好办，局部替换才是难点。比如一个卡片组件，默认内容包含标题、正文、操作区三块，外部只想替换正文，其他部分保留。直接用一个slot做不到，正确做法是把默认内容拆成多个区域，每个区域单独提供一个具名插槽，外部只填充需要自定义的部分。
<view class="card">
<view class="card-title">
<!-- 外部没传title插槽时显示默认标题 -->
<block wx:if="{{!hasCustomTitle}}">默认标题</block>
<slot name="title" wx:else></slot>
</view>
<view class="card-body">
<block wx:if="{{!hasCustomBody}}">默认正文内容</block>
<slot name="body" wx:else></slot>
</view>
<view class="card-footer">
<slot name="action">默认操作按钮</slot>
</view>
</view>这里的关键是如何知道外部是否传入了某个具名插槽。小程序没有直接提供判断接口，但可以通过约定属性来间接实现：外部传入了title插槽就同时传一个has-title属性，组件内部据此切换。虽然多了一步约定，但逻辑清晰可控。
Component({
options: {
multipleSlots: true
},
properties: {
hasTitle: { type: Boolean, value: false },
hasBody: { type: Boolean, value: false }
}
})外部使用时：
<my-card has-body="{{true}}">
<view slot="body">自定义的正文区域</view>
</my-card>这种方式把组件做成可组合的结构，外部按需覆盖任意区域，其余区域继续走默认渲染，扩展性远好于单一slot。
进阶技巧与注意事项
除了上述基础方案，还有一些细节值得注意。第一是作用域插槽的思路：小程序本身没有Vue那样的作用域插槽语法，但可以通过把组件内部状态提升到页面层来模拟，即由外部直接根据页面数据渲染插槽内容，组件只负责容器样式，这样条件判断就完全在页面侧完成，逻辑更直观。
第二是样式隔离问题。插槽内容在渲染上属于父作用域，样式也受父页面影响，组件内通过styleIsolation设置无法直接作用于插槽内容。如果希望默认内容和自定义内容外观一致，建议把公共样式抽到公共wxss中，或者给slot外层套一个统一class的容器，把样式写在容器上，通过继承影响内容。
第三是性能考量。wx:if切换会触发节点销毁重建，若插槽内包含复杂列表或图表，频繁切换代价较大。可以在初始化时判断一次条件并固定渲染结果，或者在组件attached生命周期中提前计算好showDefault，避免运行期反复setData。
最后提醒一点：如果组件的目标平台包含低版本基础库，多具名插槽在某些旧版本上表现不稳定，发布前务必在真机上验证。合理利用多个具名插槽加条件渲染的组合，基本可以覆盖绝大部分默认内容动态替换的需求，让你的小程序组件真正做到开箱即用、按需定制。