本文共 2105 字，大约阅读时间需要 7 分钟。

1、在components文件夹下新建一个你文件夹，命名为你的组件名，右键文件夹-> 新建 Component,会出现文件

效果图

代码实现

子组件

tabbar.wxml

     
        
     
      预约
       
      
        
     
      注册
       
    
   

tabbar.js

// pages/res/tabbar/tabbar.jsComponent({
     /**   * 组件的属性列表   */  properties: {
       defaultShowIndex: {
    // 属性名-- 父组件传过来的数据      type: Number, // 类型（必填），接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）      value: 0 // 属性初始值（可选），如果未指定则会根据类型选择一个    }  },  /**   * 组件的初始数据   */  data: {
       // showIndexActive: 0,  },  /**   * 组件的方法列表   */  methods: {
       // 注册事件    myTabbarEvent: function (e) {
         var index = parseInt(e.currentTarget.dataset.index)      // console.log(index)      this.setData({
    defaultShowIndex: index })      // 注册点击事件传给父组件      var fatherData = {
    showIndex: index}      this.triggerEvent('myTabbarEvent', {
    activeIndex: fatherData })    }  }})

tabbar.wxss

.my-tabbar-wrap{
     height: 50px;  width: 100%;  border-top: 1rpx solid #ddd;  display: flex;  align-items: center;  justify-content: center;}.my-tabbar-wrap .tabbar-item{
     width: 50%;  height: 50px;  color: fff;  text-align: center;}.my-tabbar-wrap .tabbar-item image{
     /* display: block; */  width: 24px;  height: 24px;  margin-top: 7px;  margin-bottom: -5px;}.tabbar-active .item-text{
     color: rgb(46, 104, 212);}.item-text{
     font-size: 12px;}

//

tabbar.json

{
     "component": true,  "usingComponents": {
   }}

到此，子组件已经创建好了，如图（此时还需调用才能展示在你要页面中，这是调用以后的效果）

父组件中使用子组件

注意点:

1、在json文件中需要注册进来 “my-tabbar”: “…/components/tabbar/tabbar” 2、wxml中引用 3、js文件中写相应的事件及数据 4、wxss中写出你的style

父组件文件列表如下:

res.wxml

res.js

// pages/res/res.jsPage({
     /**   * 页面的初始数据   */  data: {
       defaultShowIndex: 0 // 默认显示的索引  },  // 子组传到父组件的触发事件  popBaitiaoView: function (e) {
       // 接受子组件发送的数据  e    // 设置数据    this.setData({
         defaultShowIndex: e.detail.activeIndex.showIndex,    })    console.log(e.detail.activeIndex.showIndex, 'defaultShowIndex')  },})

res.json

{
     "usingComponents": {
       "my-tabbar": "../components/tabbar/tabbar"  }}

res.wxss

// 写出你的 style

到此结束

完成 √

转载地址：http://tjxxi.baihongyu.com/