VUE组件开发之 点击加载更多

VUE组件开发之点击加载更多

ClickLoadeMore.vue:

<template>
  <div class="ClickLoadeMore">
      <div class="showStr">
        <div v-if="!isShowImg" @click="loadeMore"><slot>点击加载更多</slot></div>
        <div v-if="isShowImg"><img :src="resfulImg" class="xzImg"></div>
      </div>
  </div>
</template>

<script>
export default {
    name:"ClickLoadeMore",
    props:{
        isStop:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {
            isShowImg:false,
            resfulImg:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnklEQVQ4T6WSMWtUQRSFz3lvf4BW/gexsDKNYEijggRJIURQFDvTiLy5s9sYY7M7dx5io50oKglYBAkRtQkR0tiJiD9BsNLKamevzLIbXjZBnjjl3DvfOXPvIf7zcPpeVZcBvCL5G8B3AOvOuTVV/Qlg18w+eu8fzertA3IhhHCG5B6AtyQ/Z0Bd1ydHo9FZkktmdsLM1rz3b6agpoNLADYBOJLHckMGNBVjjLfMrCZ5wTn3KdeagC0AH0TkcYxx9ShAvlPVCsANETm1DxgMBhfLslx2zl1vM1NV3UkpPej1ertjB39TPAoYQrhGckFEbk4BW8Ph8GEmtnHQ7/fny7K8LSJXxgBVfZ1SevIvgE6nc9c5tzgFPDOzHe/9yzYOml8eAyaW7onIQkvAi5TSRrfbfddc41cAz0WknoU0FVV1BcB5EVk8kIMY45yZvSdZOeeezgRonAsz+5WXBmBJRLYPACZRvkxyleQPM9ssimKvqqpv2YGZnTazuaIocgq/HIpyUzGEcIfkOQDzInJ8Arjf6LkqIhuHHLQZ4GzPH8XHwRFEX9ygAAAAAElFTkSuQmCC"
        };
    },
    watch:{
        isStop:function(newVal) {
            if (newVal) {
                this.isShowImg = false;
                this.$emit('resetState', false);
            }
        }
    },
    methods:{
        loadeMore:function() {
            this.isShowImg = true;
            this.$emit('refreshEvent');
        }
    }
}
</script>

<style>
.ClickLoadeMore{
    text-align: center;

}

.showStr{
    display: inline;
    padding: 10px 0px;
}


@keyframes roateImg {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.xzImg{
    animation: roateImg 2s linear infinite;
}
</style>

核心点讲解:

1、props属性,是外界传输数据到组件内部的通道,当然通过此属性传入组件的变量也是被监听了的,会动态改变。此属性是一个对象,对象的key会被注册到内部组件的变量域中,在vue的template中使用时与在data中定义的变量一致,但是在js块中使用时必须使用this.props.key来获取值,但是不能直接使用此方法设置该值。如要修改需要通过组件外部变量修改。

2、watch监听事件:此事件会监听注册在此对象中的变量,当时注册在之中的变量值发生赋值、改变时对应的回调函数会被触发回调。所以在此组件中第一次初始化isStop变量时对应的回调函数是被执行了的。

3、this.$emit('refreshEvent',你想穿过的去参数);触发一个绑定在此组件的属性上的事件,当然可以不传参数,如果传入了参数,则对应回到函数接受到的参数就是你在此处传入的参数。注意此时的$event对象依然被绑定只是他的值被我们传回来的值替换了,$event=你穿回来的值(默认是undefined).注意当在访问一个原生DOM事件时,$event的默认值是一个当前组件的event对象,之所以当没有传入参数父页面的回到函数能接受一个event对象为参数是因为vue的事件机制会自动将一个没有参数的事件绑定添加一个$event到方法的第一个参数上,下面我们看个例子:


<ClickLoadeMore @refreshEvent="startRefreshEvent" :isStop="isStopRefresh" @resetState="resetState"></ClickLoadeMore>


以上的startRefreshEvent方法因为没有绑定参数,所以会被解析成startRefreshEvent($event);当然我们可以自定义的绑定一些参数startRefreshEvent(1,2,3,$event,5);这样也是允许的那么它收到值在函数内部就是1,2,3,你传的参数,5 这里$event就是一个占位变量,当你不穿入值他的值就是event对象里面有当前组件的信息,当你传入值此变量存储的就是你传入的值。

阅读数:151
如有疑问请与我联系:点击与我联系