微信小程序自定义组件、父子组件传值和插槽slot的使用

微信小程序自定义组件与插槽的使用（一个简单的通用的上传图片的组件）

目录

微信小程序自定义组件与插槽的使用（一个简单的通用的上传图片的组件）

1.子组件模板

2.父组件模板

3.父子组件传值

父传子：

子组件通过自定义事件传递给父组件（调用父组件中的函数）

---

实现的功能：

• 上传图片
• 查看图片
• 删除图片之后重新上传图片

1.子组件模板（css使用的colorui）

//子组件

<view>
  <view class="bg-img" wx:if="{{img_url}}" style="position:relative;" bindtap="ViewImage">
    <image src="{{img_url}}" mode="aspectFill" style="width:300rpx;height:300rpx;"></image>
    <view class="close-icon cu-tag bg-red" catchtap="DelImg">
      <text class="cuIcon-close"></text>
    </view>
  </view>
  <view class="solids flex justify-center align-center" style="width:300rpx;height:300rpx;" bindtap="ChooseImage"
    wx:if="{{!img_url}}">
    <view class="camera-box flex justify-center align-center">
      <view class="camera" style="width:60rpx;height:60rpx;"></view>
    </view>
  </view>
  <slot></slot>
</view>

2.父组件模板

//父组件

<view>
  <form action="">
    <view class="padding-sm letter-spacing text-gray">请按要求上传清晰的服饰图片</view>
    <view class="bg-white">
      <view class="padding-sm letter-spacing">上传服装/饰品图片</view>
      <view class="cu-form-group">
        <chooseImg img_url="{{front_url}}" setUrl="front_url" bindchangeImgUrl="changeImgUrl" bindviewImage="viewImage"
          binddelImg="delImg">
          <view class="padding-sm text-center">服饰正面（必传）</view>
        </chooseImg>
        <chooseImg img_url="{{back_url}}" setUrl="back_url" bindchangeImgUrl="changeImgUrl" bindviewImage="viewImage"
          binddelImg="delImg">
          <view class="padding-sm text-center">服饰背面（必传）</view>
        </chooseImg>
      </view>
    </view>
  </form>
</view>

需要在父组件的json文件中引入：

样例图：

3.父子组件传值

父传子：

父组件：

子组件在props中接收父组件的传值（相当于直接在data中定义了可以直接使用）：

子组件通过自定义事件传递给父组件（调用父组件中的函数）

子组件：

父组件：

父组件的方法中得到了子组件传递过来的数据就可以进行对应的操作了

注意子组件传递给父组件的setUrlStr不是确定的 可能是"front_url" 也可能是 "back_url" 之后可能还有更多的其他值 在父组件中要根据setUrlStr的不同获得不同的data里面的值

所以可以这样写

    const {
      setUrlStr
    } = e.detail
    const {
      [`${setUrlStr}`]: url //关键
    } = this.data
    console.log('需要放大的图片链接', url);
    wx.previewImage({
      urls: [url],
      current: url
    });
//关键代码
const {
      [`${setUrlStr}`]: url
    } = this.data
//因为setUrlStr是这样的： {setUrlStr:"front_url"}