微信小程序（十六）slot插槽

注释很详细，直接上代码

上一篇

温馨提醒：此篇需要自定义组件的基础，如果不清楚请先看上一篇

新增内容：

1.单个插槽

2.多个插槽

单个插糟

源码：

myNav.wxml

<view class="navigationBar custom-class"><view class="navigationBarTitle title-class">自定义标题<slot></slot>//插槽位置</view>
</view>

index.wxml

<myNav custom-class="color-pink">
<text>🍉</text>
</myNav>

注意事项：没有注意事项

效果演示：

多个卡槽

多个卡槽需要提前声明一下

源码：

myNav.js

`myNav.js`
```js
Component({options:{multipleSlots:true//设置支持多个卡槽}
})

不同的插槽需要命名（自定义命名）

myNav.wxml

<view class="navigationBar custom-class"><view class="navigationBarTitle title-class"><slot name="left"></slot>自定义标题<slot name="right"></slot></view>
</view>

index.wxml

<myNav custom-class="color-pink">
<text slot="left">🍉</text>
<text slot="right">🐼</text>
</myNav>

效果演示