组件需要的参数由父级传入，通过prop来接收并设置默认值
export default {
props: {
dataList:{
type: Array,
default: [] },
probeType: {
type: Number,
default: 3
},
click: {
type: Boolean,
default: true
},
pullDownRefresh: {
type: null,
default: false
},
pullUpLoad: {
type: null,
default: false
},
}组件挂载后，在事件触发时并不直接处理事件，而是向父级发送一个事件，父级通过在模板v-on接收事件并处理后续的逻辑
mounted() {
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
pullDownRefresh: this.pullDownRefresh,
pullUpLoad: this.pullUpLoad,
}) this.scroll.on('pullingUp',()=> {
if(this.continuePullUp){
this.beforePullUp();
this.$emit("onPullUp","当前状态：上拉加载");
}
});
this.scroll.on('pullingDown',()=> {
this.beforePullDown();
this.$emit("onPullDown","当前状态：下拉加载更多");
});
}
父组件在使用时，需要传入配置参数Props以及处理子组件发射的事件，并且用具体的内容并替换掉 slot 标签
<Scroller
id="scroll"
ref="scroll"
:dataList="filmList"
:pullDownRefresh="DOWN_CONFIG"
:pullUpLoad="UP_CONFIG"
@onPullUp="pullUpHandle"
@onPullDown="pullDownHandle"
> <ul>
<router-link class="film-list" v-for="(v,i) in filmList" :key="v.id" tag="li" :to='{path:"/film-detail/"+v.id}'>
<div class="film-list__img">
<img v-lazy="v.images.small" alt="" />
</div>
<div class="film-list__detail">
<p class="film-list__detail__title">{{v.title}}</p>
<p class="film-list__detail__director">导演：{{filterDirectors(v.directors)}}</p>
<p class="film-list__detail__year">年份：{{v.year}}<span>{{v.stock}}</span></p>
<p class="film-list__detail__type">类别：{{v.genres.join(" / ")}}<span></span></p>
<p class="film-list__detail__rank">评分：<span>{{v.rating.average}}分</span></p>
</div>
</router-link>
</ul>
</Scroller>
父组件可以通过this.$refs.xxx来获取到子组件，可以调用子组件里面的方法；
computed:{
scrollElement(){
