一文读懂小程序自定义组件

一、最终效果

这是一个简单的标题组件，标题名称是由父组件传递，右侧的更多>按钮是通过插槽实现的。

二、组件的定义与使用

1、定义组件my_title

首先需要在项目的根目录下手动创建components文件夹，将我们封装的组件都存放到该文件夹下，方便统一管理。

2、在my_title.json中声明当前页面是一个组件

3、my_title.wxml

注意：我在这里使用的是命名插槽。

<!--components/my_title/my_title.wxml-->
<view class="title_wrapper">
  <view class="left_wrapper">
    <view class="line"></view>
    <view class="title" style="color:{{titleColor}}">{{title}}</view>
  </view>
  <view class="right_wrapper">
    <!-- 右侧更多>按钮的插槽，相当于一个占位符，传则有，否则无 -->
    <slot name="more"></slot>
  </view>
</view>

4、my_title.wxss

.title_wrapper{
  display: flex;
  justify-content: space-between;
  margin-bottom: 34rpx;
}
.left_wrapper{
  display: flex;
}
.line{
  width: 8rpx;
  height: 50rpx;
  background-color: #2F54EB;
}
.title{
  margin-left: 10rpx;
  font-size: 36rpx;
}

5、my_title.js

这里要注意两点，一是插槽的启用，二是接收父组件传递的参数，其他不做过多叙述。

  // 启用插槽
  options: {
    multipleSlots: true
  },
  /**
   * 组件的属性列表，接收父组件传递的参数
   */
  properties: {
    title:{
      type:String,
      value: "标题"
    },
    titleColor:{
      type:String,
      value:"#2F54EB"
    }
  },

三、组件的使用

1、注册组件

经过上面的操作，我们的组件已经封装好了，但是想要使用的话，还需要先进行注册。

注册的方式有两种，一是全局注册，二是注册局部组件。如果你组件需要引用的地方比较多，建议注册全局组件。以下是全局组件的注册方法。

在app.json中添加以下根节点：

"usingComponents": {
    "my-title": "./components/my_title/my_title"
  }

2、在父组件中使用子组件

传入插槽，就会有更多>按钮。不传的话就没有，同时也不影响布局。

ARTICLE—ENDING