关于小程序使用vant的插槽slot记录

其他的一概不多说，直接上连接，关于vant组件库的用法其实很容易查到，这里我就不多赘述。

https://youzan.github.io/vant/#/zh-CN/swipe-cell

本文主要记录关于Vant Weapp在小程序中使用的时候遇到的坑，关于插槽slot

由于平时大部分都是用原生写的，关于Vant的插槽用的少之又少，并且大部分网上的博文雷同，想找到一篇新的文章都不容易，故此记录加分享。

这里以官方文档为例：

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
  <view slot="left">选择</view>
  <van-cell-group>
    <van-cell title="单元格" value="内容" />
  </van-cell-group>
  <view slot="right">删除</view>
</van-swipe-cell>

<van-swipe-cell>
  <view slot="left">选择</view>
</van-swipe-cell>
<!--
  其实上述就是插槽的用法，
  我用我们平常使用的具名插槽类比一下，
  首先假设已经定义了一个组件"components"，类比如下：
-->
<components>
  <slot name="left">我是插槽的使用方法</slot>
</components>
<!--
  自己写的具名插槽"left"用法跟Vant中具名插槽"left"是一样的
-->

 

 

同时也看看在Vue中Vant的插槽用法，贴官方文档

<van-swipe-cell>
  <template #left>
    <van-button square type="primary" text="选择" />
  </template>
  <van-cell :border="false" title="单元格" value="内容" />
  <template #right>
    <van-button square type="danger" text="删除" />
    <van-button square type="primary" text="收藏"/>
  </template>
</van-swipe-cell>

<template #left>
  <van-button square type="primary" text="选择" />
</template>
<!--
  其实上述就是插槽的用法，
  我用我们平常使用的具名插槽类比一下，
  首先假设已经定义了一个组件"components"，类比如下：
-->
<components>
  <slot name="left">我是插槽的使用方法</slot>
</components>
<!--
  自己写的具名插槽"left"用法跟Vant中具名插槽"left"是一样的
-->