微信小程序组件的封装与传值

1、新建component文件夹存放我们的组件，里边存放的就是我们所用的组件，我们今天要做的事弹出框，新建文件夹popup存放我们的组件模板，点击右键选择新建component，就会自动生成组件的模板wxss、wxml、json、js，如图：

2、写一些组件样式和布局，和页面写法类似:

（1）wxml

<view class="com-selectBox">
  <view class="weui-cells__title">证件类型<text class="red">*</text></view>
  <view class="com-sContent" bindtap="selectToggle">
    <view class="com-sTxt">{
   
   {nowText}}</view>
    <image src="/images/user_avatar.png"  class="com-sImg"  animation="{
   
   {animationData}}"></image>
  </view>
  <view class="com-sList" wx:if="{
   
   {selectShow}}">
    <view wx:for="{
   
   {propArray}}" data-index="{
   
   {index}}" wx:key="" class="com-sItem" bindtap="setText">{
   
   {item.text}}</view>
  </view>
</view>

（2）wxss

.com-selectBox{
  width: 100%;
  padding-top: 34rpx;
  
}

.red{
  color: red;
}
.com-sContent{
  padding: 4rpx 0 0rpx 0;
  border-bottom: 1rpx solid #e2e2e2;
  background: white;
  font-size: 16px;
  position: relative;
  height: 30px;
  line-height: 30px;
}
.com-sImg{
  position: absolute;
  right: 10px;
  top: 11px;
  width: 16px;
  height: 9px;
  transition: all .3s ease;
}
.com-sTxt{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  font-size: 14px;
  color:#aaa;
}
.com-sList{
  background: white;
  width: inherit;
  position: absolute;
  /* border: 1px solid #e2e2e2; */
  border-top: none;
  box-sizing: border-box;
  z-index: 3;
  max-height: 120px;
  overflow: auto;
}
.com-sItem{
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e2e2e2;
  padding: 0 6px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.com-sItem:first-child{
  border-top: none;
}

（3）js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    propArray: {
      type: Array,
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    selectShow: false, //初始option不显示
    nowText: "请选择", //初始内容
    animationData: {} //右边箭头的动画
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //option的显示与否
    selectToggle: function () {
      var nowShow = this.data.selectShow; //获取当前option显示的状态
      //创建动画
      var animation = wx.createAnimation({
        timingFunction: "ease"
      })
      this.animation = animation;
      if (nowShow) {
        animation.rotate(0).step();
        this.setData({
          animationData: animation.export()
        })
      } else {
        animation.rotate(180).step();
        this.setData({
          animationData: animation.export()
        })
      }
      this.setData({
        selectShow: !nowShow
      })
    },
    //设置内容
    setText: function (e) {
      var nowData = this.properties.propArray; //当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
      var nowIdx = e.target.dataset.index; //当前点击的索引
      var nowText = nowData[nowIdx].text; //当前点击的内容
      //子组件触发事件
      var nowDate = {
        id: nowIdx,
        text: nowText
      }
      // triggerEvent 关键字用于将事件传递给页面
      this.triggerEvent("myget", nowDate)
      //再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
      this.animation.rotate(0).step();
      this.setData({
        selectShow: false,
        nowText: nowText,
        animationData: this.animation.export()
      })
    }
  }
})

1）父组件向子组件传递参数

先在子组件properties当中定义好要接收的参数，properties就是小程序当中接收父组件传递参数的地方，类似于vue的prop；
properties与data的不同：properties（属性）中定义的变量是开放的，外部(page页面)可以访问；data中的数据是私有的，外部不能访问；properties中type是必填的，value和observer是选填的。data中定义的变量必须有初始值否者会报 ** is not defined

2）子组件想父组件传递事件

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项；
this.triggerEvent,相当于Vue的事件总线

（4）组件的使用

1）json

{
  "usingComponents": {
    "Select": "/components/my-select/my-select"
  }
}

2) wxml

<Select prop-array="{
   
   {selectArray}}" bind:myget="getDate"></Select>

3) js

getDate:function(e){
    console.log(e.detail)
},

微信小程序组件的封装与传值

猜你喜欢