前端框架Vue应用

一、组件化开发

概念：一个页面可以拆分一个个组件，每个组件有自己独立的结构、样式、行为。

好处：便于维护，利于复用，提升开发效率。

分类：普通组件、根组件。

根组件：整个应用最上层组件，包裹所有小组件。

组件注册和使用

组件注册方式有局部注册和全局注册。局部注册是只能在注册的组件内使用，全局注册是所有组件内都能使用。一般都用局部注册，如果发现是通用组件再抽离到全局。

使用组件方式:当成html标签使用<组件名></组件名>。

组件命名规范：大驼峰命名法。

组件样式冲突scoped:写在组件中的样式默认全局生效，因此会产生多个组件之间样式冲突问题。全局样式：默认组件中的样式会作用到全局；局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件。

组件通信

组件通信就是组件与组件之间的数据传递。组件与组件之间的关系：父子关系和非父子关系。

组件通信解决方案：父子关系：父组件通过props将数据传递给子组件，子组件通过defineProps接受父组件传递数据，子组件利用$emit通知父组件修改更新。如果使用defineprops接收数据，这个数据只能在模板中渲染，如果想在script中也操作props属性，应该接收返回值。如果需要给props设置默认值，需要使用withDefaults函数。非父子关系：provide&inject。通用解决方案：Pinia(适合复杂业务场景）

插槽

作用：让组件内部的一些结构支持自定义。

基本语法：组件内需要定制的结构部分改用<slot></slot>占位，使用组件时<MyDialog></MyDialog>标签内部传入结构替换slot,给插槽传入内容时可传入纯文本、html标签、组件。

插槽可设置默认值，通过插槽完成内容定制，传什么显示什么，如果不传可显示默认值，在slot标签内写默认内容。

一个组件内有多处结构，需要外部传入标签，此时需要用到具名插槽。使用步骤：多个slot使用name属性区分名字，template配合v-slot:名字来分发对应标签。v-slot:插槽名可简写成#插槽名。