vuejs前端开发案例教程04Vuejs组件.pptxVIP

Vue.js前端开发案例教程

项目1Vue.js入门项目2Vue.js开发基础项目3Vue.js指令项目4Vue.js组件全书目录项目5过渡动画项目8综合案例——开发图书销售网站项目7网络请求与状态管理项目6路由管理

Vue.js组件项目四

能够定义、注册和使用组件

能够实现组件之间的数据传递能够使用插槽分发模板内容能够动态切换组件技能目标02能够提炼知识的核心要点，提升归纳总结的能力养成多学多做的良好习惯，提升动手实践的能力

素养目标03掌握组件的定义、注册和使用方法

掌握组件之间数据传递的方法

掌握插槽的使用方法掌握定义动态组件和实现组件缓存的方法了解组件的生命周期知识目标01项目目标

0102项目描述小刘是一名软件开发工程师，主要负责订餐系统项目的前端开发。

0102项目描述综合考虑订餐系统各模块的结构，小刘决定使用组件制作订餐系统的商品订购模块。该模块的逻辑比较复杂，在展示商品列表的同时，还需要实现添加商品至购物车中、删减购物车中的商品、查看购物车中的商品等功能。

制作订餐系统的购物车模块项目分析√在项目中新建一个单文件组件√构建组件的基本框架√在组件中定义购物车模块的相关内容①通过声明数据接收父组件（商品列表模块）传递的数据②通过声明自定义事件和触发自定义事件向父组件传递数据01?制作订餐系统的购物车模块

√在项目中新建一个单文件组件√构建组件的基本框架√在组件中定义商品列表模块的相关内容①使用?import?语句导入子组件（购物车模块）②使用?v-bind?指令向子组件传递数据③通过监听子组件的自定义事件接收子组件传递的数据√查看商品订购模块的页面效果02?制作订餐系统的商品列表模块项目分析

1.Vue.js组件是什么?2.Vue.js组件有哪些优点？问题项目准备全班学生以3～5人为一组进行分组，各组选出组长。组长组织组员扫码观看“Vue.js的组件”视频，讨论并回答下列问题。Vue.js的组件

01认识组件组件的注册和使用插槽030502组件的定义方式组件之间的数据传递动态组件0406项目导航

0907组件的生命周期项目实训项目考核1108项目实施项目总结项目评价1012项目导航

定义认识组件组件是?Vue.js?中的核心概念之一，它是可复用的代码块，用于构建网页。组件主要包括3部分：模板（template）、逻辑（script）和样式（style）。

组成部分模板（必要组成部分）样式（可选组成部分）逻辑（可选组成部分）组件的HTML结构，用于定义组件的页面结构和内容。组件的JavaScript代码，用于定义组件的行为和逻辑。组件的CSS样式，用于定义组件的样式。认识组件

组件树组件可以嵌套在其他组件中，形成组件树，如下图所示。父组件创建?Vue.js?实例时传入createApp()函数的组件。认识组件子组件直接嵌套在其他组件中的组件直接包含子组件的组件祖先组件后代组件后代组件直接或间接嵌套在其他组件中的组件包含后代组件的组件

在?HTML?文件中，以一个包含?Vue.js?特定选项的?JavaScript?对象来定义组件，语法格式如下。script//定义组件const组件名={template:…, //在该选项中定义组件的模板setup(){…} //在该函数中定义组件的逻辑}scriptstyle/*此处定义组件的样式*//style在HTML文件中定义组件组件的定义方式组件的模板内容直接写在template选项中。

!--在该标签中编写组件的模板--templateid=id选择器名…/templatescriptconst组件名={template:id选择器名,//通过id选择器名指向含有组件模板内容的标签setup(){…}}scriptstyle…/style在HTML文件中定义组件也可以将组件的模板内容写在具有?id?属性的template标签中，然后在template选项中通过id选择器名指向该标签，语法格式如下。组件的定义方式

在HTML文件中定义组件组件的定义方式方式一方式二方式三先使用上述两种方式定义组件，然后将组件传入createApp()函数中作为根组件。直接在?createApp()函数中定义根组件。在createApp()函数中定义根组件的逻辑，在挂载容器中定义根组件的模板。定义根组件

定义组件，在页面显示“Hello?Vue.js”，代码如下。示例组件的定义方式①定义一个组件?Hello（包括组件的模板和逻辑）②将组件传入?createApp()函数中作为根组件③进行实例挂载

在?Vue.js?项目中，以单文件组件的形