Vue 3前端框架应用项目教程（微课版）课件 项目5、6 Vue组件、路由管理

3.1使用组件嵌套制作“校园新闻”版块Vue组件threetasks3.2制作“简易购物车”组件3.3使用具名插槽制作“新闻热点”版块使用组件嵌套制作“校园新闻”版块任务1目录CONTENTS局部组件4

组件嵌套5组件的定义1组件的使用方法2全局组件31.组件的定义Vue采用组件化开发思想，它允许开发人员将一个大的应用程序分割成可复用的、自包含的组件。通俗地说，就是将一个应用程序拆分成若干个较小的功能块，每个功能块是一个组件。组件可以是独立的，也可以相互嵌套组合，从而构建出复杂的应用程序。在实际应用中，组件常常被组织成层层嵌套的树状结构。2.组件的使用方法在Vue中使用组件，大致可以分为以下3个步骤。步骤1：定义组件。步骤2：注册组件。步骤3：调用组件。3.全局组件在Vue中，全局组件是指可以在任何一个Vue实例的模板中使用的组件。组件一旦被注册为全局组件，就无须在每个Vue实例中单独注册，这极大地提高了代码的可复用性和可维护性。全局注册组件的语法格式如下：Vue实例.component('组件名称'，组件对象)3.全局组件4.局部组件在Vue中，局部组件是指在Vue实例内部定义的，仅在该实例或其子组件中可用的组件。局部组件有助于提高代码的模块化和可重用性，同时避免全局组件命名冲突。4.局部组件5.组件嵌套组件嵌套是Vue中一个非常强大的特性，可用于构建复杂的用户界面。组件嵌套是在一个组件的内部调用另一个组件，也就是说，在父组件的模板中以标签的形式去调用子组件。这体现出组件的层级关系。5.组件嵌套组件的定义1组件的使用2总结

全局组件3

局部组件4定义组件、注册组件、调用组件

组件嵌套5Vue实例.component('组件名称'，组件对象)在Vue实例内部定义的，仅在该实例或其子组件中可用的组件在父组件的模板中以标签的形式去调用子组件【任务提出】

任务1

使用组件嵌套制作“校园新闻”版块充分理解MVVM模式，利用双向数据绑定，设计应聘信息登记表，收集用户应聘信息，并在控制台输出用户输入的应聘信息。【任务分析】

本任务要实现获取用户应聘信息，并在控制台输出。实现思路如下：（1）使用v-model指令实现Vue实例中的数据与各表单控件的双向数据绑定；（2）使用v-bind指令绑定复选框的值；（3）使用.trim修饰符过滤用户输入的字符串中首尾的空格；（4）为“提交”按钮绑定click事件；（5）定义方法，实现在控制台输出用户输入的信息。任务1

使用组件嵌套制作“校园新闻”版块【任务实现】

(1)CSS样式代码任务1

使用组件嵌套制作“校园新闻”版块【任务实现】

任务1

使用组件嵌套制作“校园新闻”版块(2)界面代码任务1

使用组件嵌套制作“校园新闻”版块【任务实现】

(3)逻辑代码3.1使用组件嵌套制作“校园新闻”版块Vue组件threetasks3.2制作“简易购物车”组件3.3使用具名插槽制作“新闻热点”版块制作“简易购物车”组件任务2目录CONTENTS父组件向子组件传递数据6子组件向父组件传递数据76.父组件向子组件传递数据父组件向子组件传递数据是通过props实现的。具体来说，在父组件中调用子组件时，通过在子组件标签上添加或动态绑定自定义属性将数据传递给子组件；在子组件中，通过定义props来接收父组件传递的数据。6.父组件向子组件传递数据（1）静态传递数据父组件向子组件静态传递数据是指，在父组件的模板中，直接在子组件标签上添加自定义属性，子组件通过props接收父组件传递的数据。6.父组件向子组件传递数据（2）动态传递数据父组件向子组件动态传递数据主要使用props并通过v-bind指令（或其简写形式:）来实现。动态传递数据的好处是，当父组件中的相关数据发生变化时，子组件会接收到更新的数据。6.父组件向子组件传递数据（3）数据验证在Vue中，可以为子组件的props指定数据验证规则，以确保传入的数据符合预期的格式要求。这需要在组件的props中提供带有props校验选项的对象，如果传入的数据不符合数据验证规则，Vue会在浏览器的控制台中发出警告。7.子组件向父组件传递数据子组件向父组件传递数据通常是通过发送自定义事件的方式来实现的。具体来说，子组件通过$emit方法发送自定义事件，并将需要传递的数据作为事件的参数，父组件则使用v-on指令监听这个事件并接收传递的数据。$emit('eventName',[…args])7.子组件向父组件传递数据$emit方法的语法格式如下：其中，eventName是自定义事件的名称，参数args是向父组件传递的数据，若无须向父组件传递数据，则省略该参数。7.子组件向父组件传递数据父组件向子组件传递数据1子组件向父组件传递数据2总结静态传递数据动态传递数据数据验证$emit('eventName',[…args])【任务提出】

任务2制作“简易购物车”组件使用组件嵌套和父子组件间的数据传递实现简易购物车。【任务分析】

简易购物车功能可以通过父子组件间的数据传递实现，实现思路如下：（1）划分父子组件的关系，在Vue实例（即根组件或顶级父组件）中定义只放置表头信息的单行表格，使用v-for遍历子组件；（2）在子组件模板中定义用于渲染每一条数据的单行表格，并在其中添加“+”“-”按钮并实现数量加减功能，添加“删除”按钮并为其绑定click事件；（3）数据定义在Vue实例中，通过props实现将Vue实例中的数据传递给子组件，并在子组件模板中渲染传递的数据；（4）定义单击“删除”按钮触发的事件处理方法，使用$emit方法向Vue实例发送自定义事件，并将要删除的数据的id作为参数传递给Vue实例；（5）Vue实例监听子组件发送的自定义事件，定义事件处理方法接收子组件传递的数据，并完成删除功能；（6）在Vue实例中定义计算属性，实现计算总价功能，并渲染计算结果。任务2制作“简易购物车”组件【任务实现】

(1)界面代码任务2制作“简易购物车”组件【任务实现】

(2)逻辑代码任务2制作“简易购物车”组件3.1使用组件嵌套制作“校园新闻”版块Vue组件threetasks3.2制作“简易购物车”组件3.3使用具名插槽制作“新闻热点”版块使用具名插槽制作“新闻热点”版块任务3目录CONTENTS动态组件11默认插槽8具名插槽9作用域插槽108.默认插槽Vue提供了多种类型的插槽，包括：默认插槽、具名插槽和作用域插槽。8.默认插槽默认插槽是非常基本的一种插槽，也被称为匿名插槽。子组件通过<slot></slot>标签来定义插槽，类似于内容占位符，它不需要指定名称，该插槽插入什么内容取决于父组件传入什么内容。8.默认插槽如果想在一个组件中使用多个插槽，可以使用具名插槽。具名插槽通过在slot元素上添加name属性来定义，name属性的值就是插槽的名称，用来作为识别插槽的唯一标识。在插入父组件内容时，可以在template元素上使用v-slot指令（或其简写形式#）来指定要将内容插入哪个具名插槽中。9.具名插槽9.具名插槽10.作用域插槽默认插槽和具名插槽的内容都是由父组件决定的，Vue还提供了另外一种特殊的作用域插槽，它允许父组件在模板中访问来自子组件的数据。这使得组件之间的数据传递更加灵活和强大，特别是在构建可复用的组件时。10.作用域插槽使用作用域插槽的关键步骤如下：（1）在子组件模板中使用slot元素定义插槽，并使用v-bind指令绑定一个特定属性，为父组件提供数据。这个特定属性称为插槽prop，它不需要在props中声明。<slotv-bind:attribute='属性值'></slot>其中，属性attribute的名称可以自定义，属性值为子组件data选项中定义的数据。10.作用域插槽（2）在父组件调用子组件时，在template元素中使用v-slot指令来接收子组件传递的数据。使用v-slot指令时可以绑定默认插槽或具名插槽。例如：<!--绑定默认插槽--><templatev-slot:default='slotProps'><div>{{slotProps.attribute}}</div></template>或<!--绑定具名插槽--><templatev-slot:slotname='slotProps'><div>{{slotProps.attribute}}</div></template>11.动态组件动态组件是Vue中—种非常实用的功能，它可以基于不同的条件渲染不同的组件，一般通过component元素与is属性配合使用来实现。动态组件的基本语法格式如下：<component:is='组件名'></component>is属性可以绑定到一个变量上，这个变量的值就是要动态渲染的组件的名称。11.动态组件默认插槽1具名插槽2总结子组件通过<slot></slot>标签来定义插槽通过在slot元素上添加name属性来，在插入父组件内容时，可以在template元素上使用v-slot指令（#）来指定要将内容插入哪个具名插槽中。作用域插槽3动态组件4<component:is='组件名'></component>【任务提出】

任务3使用具名插槽制作“新闻热点”版块使用具名插槽将父组件中定义的数据渲染到每条新闻中的不同位置，实现“新闻热点”版块的制作。【任务分析】

使用具名插槽制作“新闻热点”版块的思路如下：（1）使用子组件呈现每条新闻；（2）每条新闻划分为缩略图、标题和文本信息3个部分，并为每个部分定义一个具名插槽；（3）在父组件中以数组的形式定义相关数据，使用v-for遍历数组；（4）调用子组件时，在template元素中使用v-slot指定插槽的名称，实现将父组件中定义的数据正确地渲染到子组件的指定位置。任务3使用具名插槽制作“新闻热点”版块【任务实现】

(1)CSS样式代码任务3使用具名插槽制作“新闻热点”版块【任务实现】

(2)界面代码任务3使用具名插槽制作“新闻热点”版块【任务实现】

(3)逻辑代码任务3使用具名插槽制作“新闻热点”版块下次课见！Seeyounexttime5.1使用vue基本路由实现选项卡功能5.2使用vue路由实现后台管理系统的导航功能配置Vue路由twotasks初识路由目录CONTENTS什么是路由1路由的引入21.什么是路由我们有没有听说过“路由”的概念呢?当然了,路由器嘛。路由器主要用于连接多个逻辑上分开的网络，可以通过路由器功能来完成不同网络之间数据的传递。程序开发中的路由分为：前端路由后端路由1.什么是路由后端路由概念：根据不同的用户URL请求，返回不同的内容。本质：URL请求地址与服务器资源之间的对应关系。服务器资源后端路由浏览器每访问一次新页面的时候，都要向服务器发送请求，然后服务器会响应请求，在这个过程中会有一定的网络延迟。1.什么是路由SPA(SinglePageApplication)单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作；SPA实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)；在实现SPA过程中，最核心的技术点就是前端路由。SPA单页面应用程序1.什么是路由前端路由

对于单页面应用SPA来说，主要通过URL中的hash(#号)来实现不同组件间的切换。前端路由在访问一个新页面的时候仅仅是变换了一下hash值而已，没有和服务端交互，所以不存在网络延迟，提升了用户体验。前端路由/index.html#/home/index.html#/about/index.html#/person1.什么是路由1.什么是路由认识vue-routervue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue-router是基于路由和组件的路由用于设定访问路径,将路径和组件映射起来；在vue-router的单页面应用中,页面的路径的改变就是组件的切换。2.路由的引入

安装vue-router方式一：直接下载引入顺序不可颠倒！！！方式二：通过npm安装步骤1:安装vue-router步骤2:在模块化工程中使用它（因为是一个插件,所以需要通过Vue.use()来安装路由功能）3.总结什么是路由：前端路由和后端路由1路由的引入：直接引入，npm安装2总结路由的使用目录CONTENTS路由的基本使用1路由的执行过程21、路由的基本使用Vue-router的使用步骤第二步：创建组件第一步：引入vue.js和vue-router.js文件component的属性值，必须是一个组件对象，不能是组件的引用名称。第三步：创建VueRouter对象：设置routes数组，在该数组中设置每条路径的映射关系：

path：对应的路由component：path对应要加载的组件第四步：注册路由

在vue实例中注册VueRouter对象1、路由的基本使用第五步：使用路由

通过<router-link>的to属性，告诉系统，我要使用哪条路径渲染组件：当通过<router-link>找到对应路径后，便将该路径对应的组件加载并渲染，

其中<router-view>相当于组件的占位符，组件加载进来后，直接将该标签替换1、路由的基本使用3.总结路由的基本使用1路由的执行过程2总结使用vue基本路由实现选项卡功能任务实现内容CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务使用vue基本路由实现选项卡功能1.提出任务引入vue.js和vue-router.js文件；创建组件；创建VueRouter对象；注册路由；使用路由重定向按钮高亮任务要点：案例效果：2.分析任务实践使用vue基本路由实现选项卡功能3.实施任务4.归纳总结总结模板使用路由待支付模板4.归纳总结总结创建组件对象创建vue-router注册路由5.1使用vue基本路由实现登录和注册的切换5.2使用vue路由实现后台管理系统的导航功能配置Vue路由twotasks路由传参目录CONTENTS动态路由1query方式传参2params方式传参31.动态路由在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/aaaa或/user/bbbb除了有前面的/user之外，后面还跟上了用户的参数，这种path和component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式：params)。动态路由在来回切换时，由于它们都是指向同一组件，Vue不会销毁再重新创建这个组件，而是复用这个组件。2.query方式传参query方式传参<router-link

to="/path?参数名1=参数值1&参数名2=参数值2"></router-link>query方式，参数会以查询字符串的方式显示在浏览器上，也就是?后面跟key和value对象中使用query的key作为传递方式在页面跳转的时候，可以在地址栏看到请求参数。配置路由格式:/router,也就是普通配置query方式传参传进来的参数，可以通过$route.query进行访问，this可以省略2.query方式传参2.params方式传参

let

routes=[{

//动态路径参数，以冒号开头

path:‘/login/:参数名1/:参数名2',

component:user

}]

在注册路由时，将参数用”/:”分隔，多个参数，也是如此，比如：‘/home/:user/:id’<router-link

to=“path/参数值1/参数值2"></router-link>在router-link中的to属性，应保持和路由path中一致的格式，且to可以被v-bind动态绑定3.params方式传参传进来的参数，可以通过$route.params进行访问params方式传参4.总结query方式传参1params方式传参2总结嵌套路由目录CONTENTS嵌套路由的概念1嵌套路由的使用方法21.嵌套路由的概念什么是嵌套路由实际项目中的应用界面通常是由多层嵌套的组件组合而成，比如在home页面中,我们希望通过/home/news和/home/message访问一些内容。一个路径映射一个组件,访问这两个路径也会分别渲染两个组件。嵌套路由就是在路由里面嵌套它的子路由。2.嵌套路由的使用方法嵌套子路由的关键属性是children；children也是一组路由，可以去配置路由数组，相当于前面讲到的routes；每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器。children属性<router-link

to="/父路由的地址/要去的子路由"></router-link>实现嵌套路由的步骤（1）创建对应的子组件（2）在路由映射中配置对应的子路由（3）在组件内部使用子路由2.嵌套路由的使用方法3.总结嵌套路由的概念1嵌套路由的使用方法2总结命名路由目录CONTENTS命名路由的概念1命名路由的使用21.命名路由的概念vue-router提供了一种隐式的引用路径，即命名路由，可以在创建Router实例的时候，在

routes

中给某个路由设置名称name值。通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，通过路由的名称取代路径地址直接使用。像这种命名路由的方式，无论path多长、多烦琐，都能直接通过name来引用，十分方便。2.命名路由的使用在创建Router实例时，在

routes

中给某个路由设置名称name值；通过路由的名称取代路径地址直接使用2.命名路由的使用

为何使用命名路由？原因一：变更了router对象中的path，那么还需要去修改<router-link>中的to的属性值；原因二：如果router对象中的path比较长，那么通过命名路由的方式，不论path多长，都可以使用该路由的名称name，因此比较方便；原因三：可以避免我们的参数传递显示在浏览器的url框中（仅在params中有效，query无效）。3.总结命名路由的概念1命名路由的使用2总结命名视图目录CONTENTS什么是命名视图1命名视图的应用21、什么是命名视图使用<router-view>可以为视图进行命名，主要用来负责路由跳转后组件的展示。在<router-view>上定义name属性表示视图的名字，根据不同的name值展示不同的页面，如left、main等。如果<router-view>没有设置名字，那么默认为default。2、命名视图的应用步骤2：创建组件对象步骤3：创建并挂载路由步骤4：使用命名路由步骤1：创建模板3.总结命名视图的概念1命名视图的使用方法2总结编程式路由导航目录CONTENTSrouter.push()1router.go()21.router.push()在Vue实例内部可以通过$router访问路由实例，因此通过this.$router.push即可实现页面的跳转。this.$route：路由对象，指向当前所在的路由映射，即所配置的路由中，哪条处于活跃状态，就指向哪条，可通过this.$route访问当前路由。this.$router：全局路由器对象，指向对应创建的VueRouter对象实例。项目中任何页面都可通过此属性获取到路由器对象；通过调用路由器对象的push，go等方法，跳转到指定页面