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

    1- 前言

    在本文中你将收获

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

    2- 组件文件新建

    2.1 定义组件

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

    • cell.js
    • cell.wxml
    • cell.json
    • cell.wxss

    2.2 注册组件

    页面的xxx.json ，usingComponent注册

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

    • 1
    • 2
    • 3

    2.3 使用组件

    <item>item>

    • 1

    2.4 图参考

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

    3- 外部类和样式隔离

    3.1定义组件

    • cell.wxml 文件
    <view class="cell cell-class">
view>

    • 1
    • 2
    • cell.wxss
    /* pages/com/com.wxss */
.cell{
  color: tomato;
}
.mycell{
  color: #f70;
  line-height: 120rpx !important;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • cell.js 文件
      /* 选项 */
  options:{
    /* 样式隔离：apply-shared 父影响子
    shared 父子相互影响   isolated 相互隔离
    */
    styleIsolation:'isolated',
  },
  //通过组件的外部类实现父组件控制自己的样式
  externalClasses:["cell-class"],

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    3.2 使用组件

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

    • 1
    • 2

    在这里插入图片描述

    3.3 图解释

    在这里插入图片描述

    4- 组件插槽

    4.1 默认插槽

    • cell.wxml
     <view class="cell">
  我是cell组件
  <slot>slot>
view>

    • 1
    • 2
    • 3
    • 4
    • cell.js
      /* 选项 */
  options:{
    //允许多个插槽
    multipleSlots:true,
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • cell.wxss
    .cell{
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 1rpx solid #cccccc;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    使用cell组件
    <cell>
  <text>放假text>
  <text>快点到来text>
cell>

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述

    4.2 命名多插槽

    • cell.wxml
     <view class="cell cell-class">
  <slot name="pre">slot>
  我是cell组件
  <slot>slot>
  <slot name="next">slot>
view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • cell.js
      /* 选项 */
  options:{
    //允许多个插槽
    multipleSlots:true,
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • cell.wxss
    .cell{
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 1rpx solid #cccccc;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • com.wxml
    
<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

    5- 组件传参

    5.1 父传子

    5.1.1 定义组件
    • cell.wxml
    <view class="cell">
  <text>{{title}}text>
  <text>{{num}}text>
view>

    • 1
    • 2
    • 3
    • 4
    • cell.js
    // components/cell/cell.js
Component({
  /* 选项 */
  options:{
    /* 样式隔离：apply-shared 父影响子
    shared 父子相互影响   isolated 相互隔离
    */
    styleIsolation:'isolated',
    //允许多个插槽
    multipleSlots:true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:""
    },
    num:{
      type:Number,
      value:1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    //定义组件自己的数据count
    count:1
  },
  /**
   * 组件的方法列表
   */
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    5.1.2 使用组件
    • com.wxml
    <cell title="做核酸" num="{{5}}">cell>
<cell title="烦呐">cell> 

    • 1
    • 2
    5.1.3 图解

    在这里插入图片描述

    5.2 子传参父

    5.2.1 定义组件
    • cell.wxml
    <view class="cell" bindtap="tapHd">
  <text>{{title}}text>
  <text>{{count}}text>
view>

    • 1
    • 2
    • 3
    • 4
    • cell.js
    // components/cell/cell.js
Component({
  /* 选项 */
  options:{
    /* 样式隔离：apply-shared 父影响子
    shared 父子相互影响   isolated 相互隔离
    */
    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)
    }
  }
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    5.2.2 使用组件
    • com.wxml
     <view class="cell" bindtap="tapHd">
  <text>{{title}}text>
  <text>{{count}}text>
view> 

    • 1
    • 2
    • 3
    • 4
    5.2.3 图解

    在这里插入图片描述

    6- 案例item组件

    6.1 定义组件

    • 首先在根目录下创建一个专门放自定义组件的文件夹；
    • 然后在小程序编辑器里，右键，新建Component；

    在这里插入图片描述

    
<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    /* components/item/item.wxss */
.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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63

    6.2 使用组件

    • 引入组件：在页面的 json 文件中进行引用声明;

    在这里插入图片描述

    <!-- 引用组件的json文件 -->
{
  "usingComponents": {
    "cell": "/components/cell/cell"
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 在页面的 wxml 中像使用基础组件一样使用自定义组件（名字和声明的保持一致）
    

<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    .myitem{
  line-height: 120rpx !important;
  background-color: #f0f0f0;
}

    • 1
    • 2
    • 3
    • 4

    往期传送门

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

  • 相关阅读:
    Mysql Innodb Cluster集群搭建 - docker
    Django之路由分发
    1.3常规信息系统集成技术
    3. const
    门控循环单元(GRU)
    结构化思维助力Prompt创作：专业化技术讲解和实践案例
    开学季征文 | 百尺竿头，我们都要更进一步
    一次Actuator未授权访问利用
    pytorch常用函数
    Python+xlrd：实现Excel文件内容读取（全文件or指定sheet页）
  • 原文地址：https://blog.csdn.net/qq_59012240/article/details/127893282