原生小程序--组件专题

组件的的生命周期

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
    ready() {
      // 在组件在视图层布局完成后执行
    }
  }
})

组件~数据监听器

observers: {
	// 监听对象里面某个属性的变化
	['obj.属性'](val) {
		console.log(val)
	}
}

自定义组件（tabs切换–slot插槽）

类似vue或者react中的自定义组件

小程序允许我们使用自定义组件的方式来构建页面

方法：

1. 与page平级新增 component文件夹（存放自定义组件）
2. 在component文件夹上点击右键，新建目录 组件名称
3. 在 组件名称文件夹上点击右键，新建component ，填写组件名称

父组件页面：

<tabs tabList="{{tabList}}" binditemChange="handleItemChange">
  <block wx:if="{{tabList[0].isActive}}">0</block>
  <block wx:elif="{{tabList[1].isActive}}">1</block>
  <block wx:elif="{{tabList[2].isActive}}">2</block>
  <block wx:else>3</block>
</tabs>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabList: [
      {
        id: 0,
        name: "首页",
        isActive: true,
      },
      {
        id: 1,
        name: "原创",
        isActive: false,
      },
      {
        id: 2,
        name: "分类",
        isActive: false,
      },
      {
        id: 3,
        name: "关于",
        isActive: false,
      }
    ]
  },
  handleItemChange(e){
    const {index} = e.detail;
     /**
       * 严谨做法：重新拷贝一份数组，再对这个数组的备份进行处理
       * let tabList = JSON.parse(JSON.stringify(this.data.tabList));
       * 一般做法：let {tabList} = this.data;
       */
      let tabList = JSON.parse(JSON.stringify(this.data.tabList));
      tabList.forEach((v, i) => {
        i === index ? v.isActive = true : v.isActive = false;
      })
      this.setData({
        tabList
      })
  }
})

{
  "usingComponents": {
    "tabs": "../../components/tabs/tabs"
  }
}

自定义子组件tabs页面：

<view class="tabs">
  <view class="tabs_title">
    <view class="title_item {{item.isActive?'active':''}}" wx:for="{{tabList}}" wx:key="id" bindtap="handleItem" data-index="{{index}}">
      {{item.name}}
    </view>
  </view>
  <view class="tabs_content">
    <!-- slot 标签  其实就是一个占位符  插槽
      等到 父组件 调用 子组件的时候 再传递  标签过来  最终  这些被传递的标签
      就会替换 slot 插槽的位置 -->
    <slot></slot>
  </view>
</view>

.tabs {
    .tabs_title {
        display: flex;
        padding: 10rpx 0;
      .title_item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0;
      }
    }
    .active {
        color: red;
        border-bottom: 5rpx solid currentColor;
    }
    .tabs_content {
  
    }
  }

// component/tabs/tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabList: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItem(e) {
      const { index } = e.currentTarget.dataset;
      this.triggerEvent("itemChange",{index});
    }
  }
})