文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

【小程序】微信小程序自定义组件Component详细总结

2023-09-23 15:47

关注

1- 前言


在本文中你将收获

  1. 小程序如何使用自定义组件
  2. 自定义组件之间的传值
  3. 自定义组件中插槽的使用

2- 组件文件新建

2.1 定义组件

在根目录新建components文件夹,建立cell 文件夹,右击创建cell的Component组件

2.2 注册组件

页面的xxx.json ,usingComponent注册

"usingComponents": {"item":"/components/item/item"}

2.3 使用组件

<item>item>

2.4 图参考

在这里插入图片描述
在这里插入图片描述

3- 外部类和样式隔离

3.1定义组件

<view class="cell cell-class">view>
.cell{  color: tomato;}.mycell{  color: #f70;  line-height: 120rpx !important;}
    options:{        styleIsolation:'isolated',  },  //通过组件的外部类实现父组件控制自己的样式  externalClasses:["cell-class"],

3.2 使用组件

<cell>cell><cell cell-class="mycell">cell>

在这里插入图片描述

3.3 图解释

在这里插入图片描述

4- 组件插槽

4.1 默认插槽

 <view class="cell">  我是cell组件  <slot>slot>view>
    options:{    //允许多个插槽    multipleSlots:true,  },
.cell{  height: 88rpx;  line-height: 88rpx;  border-bottom: 1rpx solid #cccccc;}
使用cell组件
<cell>  <text>放假text>  <text>快点到来text>cell>

在这里插入图片描述

4.2 命名多插槽

 <view class="cell cell-class">  <slot name="pre">slot>  我是cell组件  <slot>slot>  <slot name="next">slot>view>
    options:{    //允许多个插槽    multipleSlots:true,  },
.cell{  height: 88rpx;  line-height: 88rpx;  border-bottom: 1rpx solid #cccccc;}
<cell>  <text slot="pre">🐱‍👓text>  <text slot="next">🐱‍🚀text>  <text>放假text>  <text>快点到来text>cell><cell cell-class="mycell">  <text slot="next">🎉text>  <text slot="pre">🐱‍text>  <text>做核酸text>  <text>今天要做text>cell>

在这里插入图片描述

5- 组件传参

5.1 父传子

5.1.1 定义组件
<view class="cell">  <text>{{title}}text>  <text>{{num}}text>view>
// components/cell/cell.jsComponent({    options:{        styleIsolation:'isolated',    //允许多个插槽    multipleSlots:true,  },    properties: {    title:{      type:String,      value:""    },    num:{      type:Number,      value:1    }  },    data: {    //定义组件自己的数据count    count:1  },  })
5.1.2 使用组件
<cell title="做核酸" num="{{5}}">cell><cell title="烦呐">cell> 
5.1.3 图解

在这里插入图片描述

5.2 子传参父

5.2.1 定义组件
<view class="cell" bindtap="tapHd">  <text>{{title}}text>  <text>{{count}}text>view>
// components/cell/cell.jsComponent({    options:{        styleIsolation:'isolated',    //允许多个插槽    multipleSlots:true,  },    properties: {    title:{      type:String,      value:""    },    num:{      type:Number,      value:1    }  },    data: {    //定义组件自己的数据count    count:1  },  lifetimes:{    //在组件生命周期attached挂载更新count    attached(){      console.log(this.data);      //count 的值为父组件传递的num值      this.setData({count:this.data.num})    }  },    methods: {    tapHd(){      this.setData({count:this.data.count+5})      //发送一个事件      this.triggerEvent("cellclick",this.data.count)    }  }})
5.2.2 使用组件
 <view class="cell" bindtap="tapHd">  <text>{{title}}text>  <text>{{count}}text>view> 
5.2.3 图解

在这里插入图片描述

6- 案例item组件

6.1 定义组件

在这里插入图片描述

<navigator class="item itemclass" url="{{url}}" open-type="{{openType}}" bindtap="itemclick">  <view class="icon" wx:if="{{icon}}">    <image src="{{icon}}" mode="aspectFill"/>  view>  <view class="content">    <view class="title" wx:if="{{title}}">      {{title}}    view>    <slot name="title" wx:else >slot>    <view class="right" wx:if="{{!showrslot}}">      <view class="tip">{{tip}}view>      <view class="badge" wx:if="{{badge}}">      <view wx:if="{{badge===true}}" class="dot">  view>        <view wx:else class="redbadge">{{badge}}view>       view>      <view class="arrow">view>    view>    <slot name="right" wx:else>slot>  view>navigator>
.item{  line-height: 88rpx;  display: flex;  align-items: center;  justify-content: space-between;}.icon{  margin-left: 30rpx;  margin-right: 30rpx;  height: 100%;  display: flex;  align-items: center;}.icon image{  width: 60rpx;  height: 60rpx;}.content{  padding: 0 30rpx;  border-bottom: 1rpx solid #ccc;  display: flex;  flex: 1;}.title{  flex: 1;  color: #333;  font-size: 35rpx;}.right{  display: flex;  align-items: center;}.right .arrow{  height: 25rpx;  width: 25rpx;  border-top: 3rpx solid #999;  border-right: 3rpx solid #999;  transform: rotate(45deg);}.tip{  color: #999;  font-size: 28rpx;}.dot{  height: 15rpx;  width: 15rpx;  background-color: #f30;  margin-left: 15rpx;  border-radius: 50%;}.redbadge{  font-size: 20rpx;  padding: 5rpx;  background-color: #f30;  width: 30rpx;  max-height: 30rpx;  line-height: 30rpx;  color: #fff;  text-align: center;  margin-left: 15rpx;  border-radius: 20rpx;}

6.2 使用组件

在这里插入图片描述

<!-- 引用组件的json文件 -->{  "usingComponents": {    "cell": "/components/cell/cell"  }}
<item title="支付" icon="/images/icon01.png">item><item title="相册" icon="/images/icon02.png">item><item title="设置" >item><item title="朋友圈" icon="/images/icon03.png" badge="{{true}}" tip="10条消息未读">item><item title="卡包" icon="/images/icon04.png" badge="{{12}}" tip="12条消息未读">item><item title="服务" icon="/images/icon05.png" showrslot="{{true}}">  <switch checked="true" slot="right" />item><item><view slot="title">插槽titleview>item><item title="新闻" icon="/images/icon07.png" url="/pages/index/index" open-type="switchTab">item><item title="life" icon="/images/icon08.png" url="/pages/life/life" >item><item title="消息" icon="/images/icon06.png" showrslot="{{true}}" itemclass="myitem">  <switch checked="true" slot="right" />item>
.myitem{  line-height: 120rpx !important;  background-color: #f0f0f0;}


往期传送门

【Vue】描述项目中两个功能模块的业务(一点见解)
【Git】Git基础操作一文详解,入门易懂(附图和案例
【Vue3】整理的一些Vue3知识点和案例(Vue3 获取窗口宽和高)

来源地址:https://blog.csdn.net/qq_59012240/article/details/127893282

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯