Vue.js 3开发基础与实战课件 第四章 Vue组件.pptVIP

***第四章Vue组件学习目标熟悉Vue中组件的概念和定义掌握Vue中组件注册的方式掌握Vue组件之间数据的传递熟悉组件插槽技术的使用熟悉动态组件的使用在第二章我们已经学习到，在Vue应用中必须有一个根组件，而组件是Vue基础核心组成之一。组件化的开发使得开发者有能力将UI进行拆分实现独立、可重用的封装设计，并通过组件的组合嵌套等方式实现复杂的页面结构，大大提高了页面开发的灵活性和可维护性。组件概念和定义12组件的注册和使用3组件中数据的传递4动态组件5Slot插槽技术组件概念和定义1．组件的概念随着前端页面复杂度的增加，处理的逻辑越来越多，代码量也越来越大。很多页面会因为同样的UI处理逻辑而出现大量重复的代码逻辑。同时，由于缺少规范，不同项目成员的代码质量层次不齐，导致代码逻辑的维护成本高、开发效率低、开发成本高、灵活性也受到限制。这时候，开发者开始思考如何对HTML标签进行扩展，将页面中某一部分的UI逻辑独立出来，这部分UI逻辑包括UI视图、数据以及具备功能的封装。通过将这些UI逻辑封装为一个整体，暴露一些属性和函数供外部调用，这样的封装部分作为一个整体无论放在哪里都具有一样的功能和样式，从而实现了复用和解耦。而这个封装的整体就是组件Component，这种设计被称为组件化设计；组件化设计大大降低了页面复杂度和开发成