插槽的使用

// 这是一个组件

<view class="custom-class van-card {{ centered ? 'van-card--center' : '' }}">

  <view class="van-card__thumb" bind:tap="onClickThumb">

    <image wx:if="{{ thumb }}" src="{{ thumb }}" mode="{{ thumbMode }}" lazy-load="{{ lazyLoad }}" class="van-card__img thumb-class" style="border-radius:50%" />

    <slot wx:else name="thumb" />    //这里是插槽

    <van-tag wx:if="{{ tag }}" mark type="danger" custom-class="van-card__tag">{{ tag }}</van-tag>

  </view>

  <view class="van-card__content">

    <view class="van-card__left">

      <view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">

        {{ title }}

      </view>

      <slot wx:else name="title" />

      <view wx:if="{{ desc }}" class="van-card__desc desc-class">{{ desc }}</view>

      <slot wx:else name="desc" />

      <slot name="tags" />

    </view>

    <view class="van-card__right">

      <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">

        {{ price }}

      </view>

      <view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">

        {{ currency }} {{ originPrice }}

      </view>

      <view wx:if="{{ num }}" class="van-card__num num-class">{{ num }}</view>

    </view>

  </view>

  <view class="van-card__footer">

    <slot name="footer" />

  </view>

</view>

 

//外部引用

首先json文件

{

  "usingComponents": {

    "val-card": "../../../../dist/carder/index"   //这是上面那个组件

  },

  "navigationBarTitleText": "我的加盟店"

}

 

<val-card wx:for="{{NewsigningList}}" wx:key="index" class="carder" price="{{item.reg_timey}}" desc="{{item.user_tel}}" title="{{item.user_name}}">

        <view slot="thumb">   //这是页面 对应上面的那个name即可

            <image style="border-radius:50%;180rpx;height:180rpx;" wx:if="{{item.user_headimg}}" class="" src="{{item.user_headimg}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>

            <image style="border-radius:50%;180rpx;height:180rpx;" wx:else class="" src="{{user_headimg}}" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""></image>

        </view>

    </val-card>

同时需要在js文件上面定义prop 来进行接收

import { link } from '../mixins/link';

import { VantComponent } from '../common/component';

VantComponent({

  classes: ['num-class', 'desc-class', 'thumb-class', 'title-class', 'price-class', 'origin-price-class'],

  mixins: [link],

  props: {

    tag: String,

    num: String,

    usertelphone: String,

    desc: String,

    thumb: String,

    title: String,

    price: String,

    centered: Boolean,

    lazyLoad: Boolean,

    thumbLink: String,

    originPrice: String,

    thumbMode: {

      type: String,

      value: 'scaleToFill'

    },

    currency: {

      type: String,

      value: '¥'

    }

  },

  methods: {

    onClickThumb: function onClickThumb() {

      this.jumpLink('thumbLink');

    }

  }