默认插槽 具名插槽-微信小程序学习笔记

xiefandaren

微信开发文档地址：https://developers.weixin.qq.com ... figuration/app.html
学习地址


默认插槽示例代码

组件

<!--pages/list/showOder/showOder.wxml-->
<text>售卖组件</text>
<view>
<!-- 插槽内容 slot只是一个占位符，子节点会对slot进行替换  -->
<!-- 默认插槽 -->
<slot></slot>
</view>

调用

<!-- 默认插槽 -->
<view>
  <showOder>
    <!-- 默认情况下自定义子节点内容不会展示，如果需要展示 需要在模板中定义节点 -->
    我是售卖插槽
  </showOder>
  <view style="height: 20px; background-color: #eee;"></view>
  <showOder>
    第二个组件
  </showOder>
</view>

具体名插槽

组件

<!--pages/list/threeOrder/threeOrder.wxml-->

<slot name='sTop'></slot>
<view>
  <text>具名插槽</text>
</view>

<slot name='sButton'></slot>

调用

<!-- 具命插槽 -->
<view style="height: 20px; background-color: rgb(255, 0, 0);"></view>
<view>
  <threeOrder>
    <text slot='sTop'>顶部笑哈哈</text>
  </threeOrder>

  <view style="height: 20px; background-color: #eee;"></view>
  <threeOrder>
    <text slot='sButton'>底部笑嘻嘻</text>
  </threeOrder>

  <view style="height: 20px; background-color: #eee;"></view>
  <threeOrder>
    <text slot='sTop'>顶部笑哈哈</text>
    <text slot='sButton'>底部笑嘻嘻</text>
  </threeOrder>
</view>