Vue.js 超详细入门与项目实战（微课视频版）课件 第15章 商品分类页开发

第15章商品分类页开发课件V1.0

教学内容第一节

分类页查询功能第二节分类左侧导航第三节

分类右侧列表知识目标教学目标理解和掌握

vant4

中

van-search

组件的应用掌握

van-sidebar组件的功能和应用方法掌握和理解

Vue3

中父子组件相互传值的方法知识点预览#节知识点难点重点应用15C15-01分类页查询功能1、页面效果

2、组件代码3、组件调用C15-02分类左侧导航1、页面效果2、组件代码3、组件调用C15-03分类右侧列表1、页面效果2、组件代码3、组件调用

商品分类别展示是商城项目开发时的一项重要功能，并且在展示时，由于商品类别众多，还需要添加一个查询功能，以方便用户查找自己需要的类型。商品类别查询功能通常放置在页面的顶部，使用一个左侧带查询图标的文本输入框，当用户在输入框中录入查询内容时，列表区将自动显示查询的结果。分类页查询功能

在src/components目录下，新建一个名称为category的文件夹，该文件夹保存所有与商品分类有关的组件，它的目录结构如图所示。RtIndex是商品类别的首页组件，它依赖的子类组件放置在components文件夹中，在该文件夹中，由名为RtSearch的组件实现查询类别名称的功能，使用van-search组件实现类别的查询功能，组件的v-model属性绑定输入的查询字符，input事件可以捕捉用户在输入时的实时内容，并在该事件中，通过自定义组件事件的方式，将查询的内容返回给父类组件。组件代码

所有的商品分类子组件，都被category文件夹中的RtIndex组件调用，该组件负责组合分类的各个子类功能组件。先导入RtSearch组件，然后在components对象中声明导入的组件，最后，在模版中使用该组件，使用时，通过绑定组件自定义的onInputSearch事件，在该事件中，获取到返回的查询内容，并根据内容，通过includes方法过滤对应的记录。组件调用在商品分类页中，除了实现查询类别名称功能外，还需要实现左侧焦点导航功能，即以选项卡的形式展示全部的类别名称，当点击某个名称时，该名称自动获取选中焦点，同时，分类右侧栏显示对应名称的类别列表。分类左侧导航在目录结构下，由名为RtCateLeft的组件实现分类左侧导航条的功能。在代码中，使用van-sidebar组件实现垂直方向的侧边栏，侧边栏中的全部选项则由van-sidebar-item组件绑定，van-sidebar组件通过change事件，可以获取到切换侧边栏的索引号，并将该索引号，通过组件的自定义事件onChange，返回给父组件。组件代码与调用分类查询子组件相同，全部的分类子组件都被category文件夹中的RtIndex组件调用。在代码中，当在模板中调用rt-cate-left组件时，需要通过属性的方式向子组件传递左侧全部显示的分类名称数据items，同时，当点击左侧导航条某个分类名称时，触发绑定的组件自定义的onChange事件，在该事件中，获取返回的点击索引号，并判断该索引号的值是否为空，如果为空，则显示全部，否则，根据该索引号过滤对应的记录。组件调用分类页的右侧，是一个显示结果的列表，当查询内容或左侧导航选项发生变化时，该列表的显示数据将会自动同步变更，实现用户操作与数据展示实时同步的效果。分类右侧列表在目录结构下，由名为RtCateRight的组件实现分类右侧列表显示的功能。在代码中，调用van-grid组件实现数据以列表形式展示，column-num属性控制列表中每行显示的列数，van-grid-item组件绑定每个单元格中的数据，并通过van-image组件显示单元格中的图片，全部的单元格数据，由组件的items属性值传入。组件代码全部的分类子组件都被category文件夹中的RtIndex组件调用，它与同样调用了分类右侧列表子组件。通过导入、声明并首次加载rt-cate-right组件时，将已获取到默认右侧列表数据的变量curItems，通过items属性传入