vue3与ts组件封装提高代码复用性_vue.js_

引言

对于一名前端程序员来说封装组件是一个必备技能。当我们在日常的工作中总有所用的组件库满足不了需求的情况，这就需要我们有封装组件的基本功了。 封装组件，可以提高我们代码的复用性，提高工作效率，提高代码的可阅读性。

组件我自己的理解的话，分为两种吧，一种是工具类的组件，一种是页面级别的组件，工具类的组件就是说封装后，在以后的项目中如果用相同的应用场景时，可复用。页面类组件的话就是将一个大的页面分成很多的小组件，然后进行拼接，组成大页面，让页面看起来不臃肿，美观，提高代码的阅读性。方便后期的维护管理。

轮播图组件的封装

在父组件中留出位置放子组件（子组件为全局组件。）在pinia中发送请求拿数据 在拿到数据后cope value 去拿泛型。父传子的方式去在子组件中接收数据，在子组件中去做相应的业务逻辑，自动播放，按钮，前进后退等功能。

在pinia中发请求拿到数据

import request from '@/utils/request' import { defineStore } from 'pinia' import {IApiRes, banneritem } from '@/types/data' export default defineStore('home',{ state:()=>{ return{ bannerlist: [] as banneritem[] } }, actions:{ // 获取轮播图数据 async getBannerList(){ const res = await request.get>('/home/banner') console.log(res,'2222222'); this.bannerlist = res.data.result }, 

types/data中进行泛型补充：

// 所有的接口的通用类型 export interface IApiRes { code: string msg: string result: T } // banner轮播图类型 export type banneritem={ id: string; imgUrl: string; hrefUrl: string; type: string; } 

父组件中

在父组件中使用传入相应的参数即可。

在子组件中

相应的样式及业务逻辑，都有注释，我就不一一写了。

以上就是vue3与ts组件封装提高代码复用性的详细内容，更多关于vue3与ts组件封装的资料请关注其它相关文章！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！