Vue后台管理系统项目(27)SPU管理内容的切换

目录

gitee仓库地址:

业务需求

----展示SPU列表结构

----添加SPU|修改SPU

 ----展示添加SKU结构

1.测试切换

2.引入注册使用子组件


gitee仓库地址:

https://gitee.com/CMD-UROOT/my_project/commits/master

大家根据上传历史进行查找你需要的代码

业务需求

完成SPU管理内容切换

----展示SPU列表结构

Vue后台管理系统项目(27)SPU管理内容的切换_第1张图片

----添加SPU|修改SPU

Vue后台管理系统项目(27)SPU管理内容的切换_第2张图片

Vue后台管理系统项目(27)SPU管理内容的切换_第3张图片

 ----展示添加SKU结构

Vue后台管理系统项目(27)SPU管理内容的切换_第4张图片

1.测试切换

在views/product/Spu/index.vue中:

Vue后台管理系统项目(27)SPU管理内容的切换_第5张图片

效果:

Vue后台管理系统项目(27)SPU管理内容的切换_第6张图片

 Vue后台管理系统项目(27)SPU管理内容的切换_第7张图片

 现在我们不想把这几个div放在同一个组件中,因为添加SPU|修改SPU和展示添加SKU他们的结构都太多了,到时候都放在同一个页面就太多了,看起来很乱,所以我们把这两部分拆成组件进行显示

2.引入注册使用子组件

按照下图建两个文件夹,分别处理添加SPU|修改SPU和展示添加SKU这两部分

Vue后台管理系统项目(27)SPU管理内容的切换_第8张图片

在SpuForm中:

Vue后台管理系统项目(27)SPU管理内容的切换_第9张图片

 在SkuForm中:

 Vue后台管理系统项目(27)SPU管理内容的切换_第10张图片

在父组件views/product/index.vue中:引入注册使用两个子组件

Vue后台管理系统项目(27)SPU管理内容的切换_第11张图片

 效果和最开始的是一样的,实现了切换效果

你可能感兴趣的:(vue后台管理项目,vue.js,前端,javascript)