Vue 3前端框架应用项目教程（微课版）课件 项目5 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）调用子组件时，在te