老板需求如下
- 首页实现分页加载数据
- 其他若干页面改版
改版倒是都好说,大多是修改网页页面布局调整,但是vue3+ts 做分页就有点挠头了。原来开发这个程序小哥是在外地,现在也不能维护了。这个苦逼啊,没办法,只能硬着头皮上啦。研究了几天给我的感觉还是一头浆糊。只能尝试剑走偏锋啦,我用组件写了一个分页 完美实现了想要的效果,下面总结下:
在 components 目录下新建了一个 Listpages.vue 文件
在这个里面实现的分页,写法还是我熟悉的之前vue2的写法,完全没有使用ts写法,实在是不习惯。就这样搞吧
总结几处关键代码分享给大家:
# 子组件时间触发父组件事件
toBind:function(){
this.$parent.jumpBind()
},
//跳转详情
toDetalis:function(xcxId){
// xcxId = 1;
this.$parent.jumpChildDetalis(xcxId);
}
父组件调用自己写好的组件
# template 中调用
<template>
<!-- 分页列表组件 -->
<Listpages />
</template>
// javascript 中导入组件
# 导入组件
import Listpages from "@/components/Listpages.vue"
# 组件挂载
export default defineComponent({
name: 'HelloWorld',
components: {
Banner,Listpages
},
});
其他的不过多说啥,写法基本上是vue2的写法,希望能给身处迷茫的你一点指引,加油童鞋