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

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

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

 二、完善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、创建好的格式如下图：

 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运行到火狐浏览器，进行测试，显示如下页面（左侧），如下图：

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