微信小程序(组件的业务)slot 的使用

1.调用组件向自定义组件插入内容,使用  slot

在自定义模板中有一对<view><slot></slot></view>,这里是干什么用的呢?在组件模板中可以提供一个 <slot> 节点,用于承载组件引用时提供的子节点。

 在components创建组件 , 点击 components 自动创建好所需文件

   在 .wxml 文件中输入

<view>
    <slot></slot>
</view>

2 .json 文件 开启 :  component: true  开启组件使用

3  如果启用多slot支持 ,在js中引入

  

options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },

4. 组件完毕, 视图引入组件 , pages 文件中的属于视图

   比如:pages文件中的  detail 文件引用组件,为父组件

  1. 先在父组件 . json 中 引入 子组件的路径

   

2. 在 wxml 使用  , 我定义的 子组件 名为  c-ping

  如图使用: <c-ping><text> 这里写内容 </text></c-ping>

  

3. 视图就会显示出来内容,如果没有 slot  ,视图就不显示内容

   页面显示, OK 了

   

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值