un7.4:使用uniapp在前端页面中实现组件封装并使用。

旧城等待， 2023-10-11 17:44 22阅读 0赞

今天我要和大家分享的是，如何在HbuilderX前端页面中实现组件封装并进行使用，其实实现此方法是极为简单的，接下来，我来展示一下。

一、首先，我们打开前端页面（也就是HbuilderX），在file/pages下新建一个目录，名为template，在此目录下新建一个vue文件，名为menu\_draw.vue，如下图：

![0e336e935ba1435590de18f0ce917578.png][]

二、完善menu\_draw.vue文件，每段代码都非常清晰的标识了解释，如果还不理解，可以私信或留言问我，代码如下：

<template>
     <view>
      
      <uni-nav-bar backgroundColor="#d3233b" color="#ffffff" title="律行法务后台管理系统"
      leftText="功能列表" @clickLeft="showDraw"></uni-nav-bar>
      
      <uni-drawer ref="showLeft" mode="left" mask-click="true">
       <scroll-view scroll-y="true" style="height: 100%;">
        <uni-collapse>
    		<uni-collapse-item title="用户管理">
    			<uni-list>
    				<uni-list-item title="用户列表" showArrow="true" :clickable="true" @click="jump(1)"></uni-list-item>
    			    <uni-list-item title="添加用户" showArrow="true" :clickable="true" @click="jump(2)"></uni-list-item>
    			</uni-list>
    		</uni-collapse-item>
    		<uni-collapse-item title="角色管理">
    			
    		</uni-collapse-item>
    		<uni-collapse-item title="资源管理">
    			
    		</uni-collapse-item>
    	</uni-collapse>
       </scroll-view>
      </uni-drawer>
     </view>
    </template>
    
    <script>
     export default {
      data() {
       return {
        
       }
      },
      methods: {
       /**
        * 点击标题栏功能列表
        */
       showDraw(){
        this.showDrawer();
       },
       //拉开抽屉
       showDrawer(){
        this.$refs.showLeft.open();
       },
       //推回抽屉
       closeDrawer(){
        this.$refs.showLeft.close();
       },
       /*跳转*/
       jump(flag){
    	   if(flag==1){//跳转到用户列表
    		   //console.log("跳转到用户列表");
    		   uni.redirectTo({
    		   	url:"../user/user"
    		   })
    	   }else if(flag==2){
    		   console.log("跳转到添加用户");
    	   }
       }
      }
     }
    </script>
    
    <style>
    
    </style>

如此，便实现了封装，接下来直接导入。

三、在main文件夹下创建main.vue文件，只需三步即可，如下所示：

1、导入外部文件，代码如下：

import menuDraw from "../template/menu_draw.vue";//第一步：导入外部文件

2、进行组件声明，代码如下：

/*组件的声明*/
    		components:{
    			menuDraw  //第二步，声明组件，多个组件用逗号隔开
    		},

3、使用组件，代码如下：

<menuDraw></menuDraw>

如此，就将封装好的组件拿来使用了，为了更方便理解，我具体的举例说明。

四、将以上步骤执行完毕后，我们再新建一个user文件夹，此文件夹下自带一个user.vue文件。

1、创建好的格式如下图：

![cf3eec85714544eebf55b241a3e36f79.png][]

2、在创建好的user.vue里边的template中写下展示的样式，并且调用userlist中的数据。

<template>
    	<view>
    		<menuDraw></menuDraw>
    		<uni-table :border="true" :stripe="true">
    			<uni-tr>
    				<uni-th align="center">ID</uni-th>
    				<uni-th align="center">用户名</uni-th>
    				<uni-th align="center">电话</uni-th>
    				<uni-th align="center">密码</uni-th>
    				<uni-th align="center">头像</uni-th>
    				<uni-th align="center">操作</uni-th>
    			</uni-tr>
    			<uni-tr v-for="user in userList">
    				<uni-td>{
       {user.id}}</uni-td>
    				<uni-td>{
       {user.username}}</uni-td>
    				<uni-td>{
       {user.phone}}</uni-td>
    				<uni-td>{
       {user.passwd}}</uni-td>
    				<uni-td>{
       {user.portrait}}</uni-td>
    				<uni-td align="center">
    					<button @click="doUpdate(user.id)" type="primary" size="mini" style="margin-right: 10rpx;">修改</button>
    					<button @click="doDelete(user.id)" type="warn" size="mini">删除</button>
    				</uni-td>
    			</uni-tr>
    		</uni-table>
    		
    		<uni-pagination
    		:current="pageIndex"
    		:pageSize="pageSize"
    		:total="pageTotal"
    		@change="pageChanged"
    		/>
    	</view>
    </template>

2、定义请求列表的函数，

onShow() {
    			this.requestUsers();/*定义请求用户列表的函数，通过http请求微服务用户列表*/
    		},

3、发起请求，代码如下：

methods: {
    			/*请求用户列表*/
    			requestUsers(){
    				/*uni_app的API发生http请求*/
    			uni.request({
    			    url: 'http://localhost:8082/authuser/show', //仅为示例，并非真实接口地址。
    			    data:{
    				pageIndex: this.pageIndex,
    				pageSize: this.pageSize
    				},
    				success: (res) => {
    			        console.log(res.data);/*打印数据到控制台*/
    					this.userList = res.data.data;
    					this.pageTotal = res.data.totle;
    			    }
    			});	
    			},
    			//*当分页器被点击时触发*/
    			pageChanged(e){//*当分页器被点击时触发
    				console.log(e.current);//打印出当前点击的页码
    				this.pageIndex = e.current;//给页码赋值
    			    this.requestUsers();
    			},
    			/*点击列表修改按钮时触发*/
    			doUpdate(id){
    				console.log("用户修改:id="+id);
    			},
    			/*点击列表删除按钮时触发*/
    			doDelete(id){
    				console.log("用户删除:id="+id);
    			},
    		}

五、点击main或者user运行到火狐浏览器，进行测试，显示如下页面（左侧），如下图：

![62092943949c4d90aa0df9da35912fd8.png][]

如此，我们便实现了在前端进行组件封装并进行使用的功能了。

[0e336e935ba1435590de18f0ce917578.png]: https://img-blog.csdnimg.cn/0e336e935ba1435590de18f0ce917578.png
[cf3eec85714544eebf55b241a3e36f79.png]: https://img-blog.csdnimg.cn/cf3eec85714544eebf55b241a3e36f79.png
[62092943949c4d90aa0df9da35912fd8.png]: https://img-blog.csdnimg.cn/62092943949c4d90aa0df9da35912fd8.png