vue小疑问

Question

如下代码(摘自：https://juejin.im/post/5bd97e...，为什么ul下面没有li，哪里写错了吗？？

app.vue

<template>
  <div>
    <infinite-scroll :on-infinite="loadData" ref="infinite">
      <ul slot="list">
        <li v-for="n in Number" :key="n">{{n}}</li>
      </ul>
    </infinite-scroll>
  </div>
</template>

<script type="text/babel">
import InfiniteScroll from "./components/Demo.vue"; //引入infinitescroll.vue文件
export default {
  data() {
    return {
      Number: 200
    };
  },
  methods: {
    loadData() {
      setTimeout(() => {
        this.Number = 20;
        this.$refs.infinite.$emit("loadDone");
      }, 1000);
    }
  },
  components: {
    InfiniteScroll
  }
};
</script>

Demo.vue

<template>
  <div>
    <slot name="list"></slot>

    <div class="list-donetip" v-show="!isLoading && isDone">
      <slot>没有更多数据了</slot>
    </div>

    <div class="list-loading" v-show="isLoading">
      <slot>加载中</slot>
    </div>
  </div>
</template>

<script type="text/babel">
export default {
  data() {
    return {
      isLoading: false,
      isDone: false
    };
  },
  props: {
    onInfinite: {
      type: Function,
      required: true
    },
    distance: {
      type: Number,
      default: 100
    }
  },
  methods: {
    init() {
      this.$on("loadedDone", () => {
        this.isLoading = false;
        this.isDone = true;
      });

      this.$on("finishLoad", () => {
        this.isLoading = false;
      });
    },
    scrollHandler() {
      if (this.isLoading || this.isDone) return;
      let baseHeight =
        this.scrollview == window
          ? document.body.offsetHeight
          : this.scrollview.offsetHeight;
      let moreHeight =
        this.scrollview == window
          ? document.body.scrollHeight
          : this.scrollview.scrollHeight;
      let scrollTop =
        this.scrollview == window
          ? document.body.scrollTop
          : this.scrollview.scrollTop;

      if (baseHeight + scrollTop + this.distance > moreHeight) {
        this.isLoading = true;
        this.onInfinite();
      }
    }
  },
  mounted() {
    this.scrollview = window;
    this.scrollview.addEventListener("scroll", this.scrollHandler, false);
    this.$nextTick(this.init);
  }
};
</script>

Answer 1

换个变量名，Number有可能被当成保留字了。