学习：uniapp全栈微信小程序vue3后台（9）

41.将公共模块进行抽离定义成统一的组件

新建文件

自定义模板

选择模板

剪切粘贴

导入引用子组件

样式

方法

修改

温故知新：

(1) 页面级文件

文件	功能	依赖关系
list.vue	列表展示+搜索+分页	1. 使用  GoodsTable.vue 渲染表格2. 调用  useGoodsApi.js 获取数据
detail.vue	商品详情展示	1. 复用  GoodsForm.vue （只读模式）2. 调用API获取单条数据
edit.vue	商品编辑	1. 复用  GoodsForm.vue +  SkuEditor.vue 2. 调用API提交修改
add.vue	商品新增	1. 复用  GoodsForm.vue +  ImageUpload.vue 2. 调用API提交新增

(2) 公共组件

组件	功能	被哪些页面依赖
GoodsForm.vue	商品基础表单（名称/价格等）	add.vue, edit.vue, detail.vue
GoodsTable.vue	带分页的列表表格	list.vue
SkuEditor.vue	可视化SKU规格编辑	edit.vue, add.vue
ImageUpload.vue	多图上传+预览	add.vue, edit.vue

42.组件的双向绑定v-model及defineProps单向

数据流管理

使用 
props 接收父组件传递的数据（ 
item ）。

通过 
emits 向父组件传递更新后的数据（ 
update:item 事件）。

父 /pages/wallpaper/picadd

当子组件内部通过 
emit('update:item',) 触发事件时，父组件的 
picItem 会自动更新。

子 /pages/wallpaper/children/PicEditItem

温故知新：

这里接收一个 
visible 属性，并通过 
update:visible 事件实现与父组件的通信，这是Vue3中实现自定义v-model的标准模式。

消息中心组件，集成通知和任务消息

43.将子组件各事件完成并与父组件达成交互

补充修改

删除标签方法

修改  /pages/wallpaper/picadd

温故知新：

44.开发修改模块实现组件的三层嵌套

创建图片列表弹窗

在piclist中引入PiclistPoppup

编写，在PiclistPoppup中引入PicEditItem

温故知新：

第一层：
image/list.vue (图片列表页面)  第二层：
ImageMain.vue  第三层：
UploadFile.vue 

45.获取单条数据并将数据传输到组件中展示

在/uniCloud-alipay/cloudfunctions/admin-wallpaper-picture/index.obj.js写item()方法

async item(id) {
		const dbJQL = uniCloud.databaseForJQL({
			clientInfo: this.getClientInfo()
		})
 
		return await dbJQL.collection("wallpaper-piclist").doc(id)
			.field(`picurl,
			description,
			score,
			tabs,
			checked,
			classid	`)
			.get({ getOne: true }) // 返回单条数据
	},

/pages/wallpaper/piclist，update方法

const update = async (id) => {
		try {
			// 调用云对象的 item 方法，根据 id 获取壁纸详情
			let { errCode, errMsg, data } = await picCloudObj.item(id)
			// 如果接口返回错误码，提示错误并终止执行
			if (errCode !== 0) return showToast({ title: errMsg });
			// 将接口返回的数据合并到 picItem 中，并添加临时 URL 字段
			picItem.value = { ...data, tempurl: data.picurl }
 
			picPopRef.value.open();
		} catch (err) {
			console.log(err);
		}
	}

/pages/wallpaper/children/PiclistPoppup

温故知新：