微信小程序 自定义组件传参

最近自学微信小程序开发，尝试着创建自定义组件并进行使用，过程中遇到一些疑惑，通过网上搜索相关的问题解答，终于将一个简单的组件完成了

以下为本次分享的一些代码和过程说明，希望能给大家做些参考

首先，说明下该自定义组件的功能：封装一个弹窗，将弹窗的标题，内容，按钮文字通过不同的应用场景进行动态显示，组件界面如下

接下来，我们看下实现过程

第一步：样式调整（可将自定义组件在页面中调整好内容样式，此部分和正常写页面一样）

第二步：在项目工程目录的components下创建自定义组件文件夹命名为popup

popups/index.json文件中设置如下：

component值设置为true，即意味着该组件为自定义组件，如组件内引用了其他外部组件，则在usingComponents参数设置对应的组件信息

第三步：将组件内容拷贝到对应的文件夹内

<!--components/popup/index.wxml-->
<view class="vi_pop">
    <view class="vi_pop01">
      <view class="vi_pop02">
        <view class="fs_48">{{title}}</view>
        <view class="pd_tb_28">{{content}}</view>
        <view class="flx_row">
          <button class="w50 marg_rt bg_red white" data-index="0" bindtap="popupTap">{{button1}}</button>
          <button type="default" class="w50 marg_lf" data-index="1" bind:tap="popupTap">{{button2}}</button>
        </view>
      </view>
    </view>
  </view>

这里需要注意：如果自定义组件内有使用app.wxss中公共的样式，在自定义组件内会失效，需要在自定义组件.wxss文件中单独维护，或者通过stylelsolation参数设置的方式（本次不做过多说明） 

/* components/popup/index.wxss */
.flx_row{
  display: flex;
  flex-direction: row;
}
.vi_pop{
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,0.5);
}
.vi_pop01{
  height: 900rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 25%;
  margin-left: 28rpx;
  margin-right: 28rpx;
}
.vi_pop02{
  width: 92%;
  background-color:white;
  padding: 28rpx;
}
.w50{
  width: 50%;
  padding: 10rpx;
}
.marg_lf{
  margin-left: 10rpx;
}
.marg_rt{
  margin-right: 10rpx;
}
.fs_48{
  font-size: 48rpx;
}
.pd_tb_28{
  padding-top: 28rpx;
  padding-bottom: 28rpx;
}
.w50{
  width: 50%;
}
.marg_rt{
  margin-right: 10rpx;
}
.marg_lf{
  margin-left: 10rpx;
}
.bg_red{
  background-color: #ca0505;
}
.white{
  color: white;
}

第四步：定义组件参数   在自定义组件文件夹下的js文件中，properties中定义组件变量（需要从组件外传入，此处定义组件名称-类型 及对应值（如果有默认值，此处可填写默认值，即外部不传入值的情况下组件显示默认值）

例如：title为组件变量，类型为string，值为“提醒”，如果由组件外传入，则默认值失效，显示传入的值

// components/popup/index.js
Component({

    /**
     * 组件的属性列表
     */
    properties: {
      title:{
        type:String,
        value:'提醒'
      },
      content:{
        type:String,
        value:''
      },
      button1:{
        type:String,
        value:'waiting'
      },
      button2:{
        type:String,
        value:'waiting'
      },
    },

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

    /**
     * 组件的方法列表
     */
    methods: {
      popupTap:function(e){
        console.log("popupTap====",e)
        const {index}=e.currentTarget.dataset;
        this.triggerEvent("popupTapChange",{index});
      }
    }
})

第五步：组件使用

引入自定义组件，如下，组件名称和对应的组件路径

wxml文件中组件使用，popup为组件名称，title、content、button1、button2为自定义组件的属性，在使用时对其赋值

<popup title="提醒" content="请确认您已经添加完所有的家庭成员？家庭成员是指您的配偶和所有未成年子女。" button1="同意继续" button2="返回" wx:if="{{showIndex=='1'}}" bind:popupTapChange="windowPopup">
  </popup>

因自定义组件确定button和页面有逻辑交互，因此在自定义组件的button事件中赋值触发事件popupTapChange，外部可绑定此事件进行逻辑处理（bind:popupTapChange="windowPopup")

调用页面方法处理

至此，组件调用完成。