vue slot

插槽使用

一个vben中使用的例子

• BasicForm 是模板
• 是插件
• 下边的schema配置slot:’f3’会在模板上生成一个插槽

由于数据是组件内部提供的，所以组件外部使用则受作用于插槽的限制。
处理方案是用一个插槽props
也就是#f3=”{model}”，这样组件外部就可以拿到内部数据了

作用域插槽

组件定义时的span标签的slot内可以访问组件使用时传递的props，
但组件使用时插件是不能使用传递给组件内部的props的，尽管插件看起来像是渲染在组件内部。

下边的组件使用时写的插件click here…也是无法使用组件传递给内部的url属性的，只有组件内部才可以使用props访问这个props，如果一定要用可以使用插槽props再传递上去

完整h5列表加载demo

props传递的是api请求接口方法，数据是到组件内部才获取到的
如果在外部使用组件内部的数据则可以使用

<PageLoadList>
  <template #item="{model}">
        // 这个model就是组件内部的列表数据it
      <view>hello</view>
    </template>
</PageLoadList>

<template>
  <view class="content_box">
    <scroll-view
      style="height: calc(100vh - 80rpx)"
      scroll-y="true"
      enable-back-to-top
      @scrolltolower="loadMore"
    >
      <view v-for="(it, idx) in dataList" :key="idx">
        <slot name="item" :model="it"></slot>
      </view>
      <u-empty :show="isEmpty" style="height: 90vh" text="暂无数据" mode="list"></u-empty>
      <u-loadmore
        v-if="dataList.length"
        height="80rpx"
        :status="loadStatus"
        icon-type="flower"
        color="#ccc"
      />
    </scroll-view>
  </view>
</template>
<script>
  /**
   * 分页加载列表
   * @property {String} reqApi - 请求接口方法
   * @property {String} reqParams - 请求接口带的参数
   */
  export default {
    props: {
      // 请求接口的方法
      reqApi: {
        type: Function,
        default: () => {},
      },
      // 请求接口带的参数
      reqParams: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        // loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
        loadStatus: 'loadmore',
        // 当前页
        currentPage: 0,
        // 最后一页
        lastPage: 0,
        // 列表数据
        dataList: [],
      };
    },
    computed: {
      isEmpty: function () {
        return this.dataList.length === 0;
      },
    },
    watch: {
      reqParams() {
        this.currentPage = 0;
        this.dataList = [];
        this.getOrderList();
      },
      reqApi() {
        this.currentPage = 0;
        this.dataList = [];
        this.getOrderList();
      },
    },
    methods: {
      loadMore() {
        if (this.currentPage < this.lastPage) {
          this.currentPage += 1;
          this.getOrderList();
        }
      },
      async getOrderList() {
        this.loadStatus = 'loading';
        const res = await this.reqApi({
          ...this.reqParams,
          pageNum: this.currentPage,
        });
        if (res.rescode === 200) {
          const { dataList, totalCount, pageSize } = res.data;
          this.dataList = this.dataList.concat(dataList);
          this.lastPage = Math.ceil(totalCount / pageSize);
          this.$nextTick(() => {
            this.loadStatus = this.dataList.length < totalCount ? 'loadmore' : 'nomore';
          });
        }
      },
    },
  };
</script>
<style lang="scss"></style>