vue的组件介绍

组件化开发

1. 组件化:一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
2. 好处:便于维护，利于复用 →提升开发效率。
3. 分类：普通组件、根组件

根组件

1. 根组件:整个应用最上层的组件，包裹所有普通小组件。

App.vue单文件

App.vue单文件组件组成：

1. Template：结构（vue2只能有一个根元素，vue3无限制）
2. Script：js逻辑
3. Style：样式

*这里插入一个Scoped属性的讲解

因为在style写的样式会作用到全局，因此很容易造成多个组件之间的样式冲突问题。

而给组件加上scoped时可以让样式只作用于当前区域。

格式：<style scoped></style>

普通组件的注册使用

1. 注意组件要放在components文件里面
2. 使用:当成 html标签使用`<组件名></组件名>`
3. 组件名规范 →大驼峰命名法，如:HmHeader
4. 一般都用局部注册，如果发现确实是通用组件，再抽离到全局。

1.局部注册:

只能在注册的组件内使用

① 创建 .vue 文件(三个组成部分)

② 在使用的组件内导入并注册

格式：

2.全局注册:

所有组件内都能使用

① 创建 .vue 文件(三个组成部分)

②然后在main.js进行全局注册

格式：

组件通信

原理：指组件和组件之间的数据传递

分类：父子关系     非父子关系

1.父子关系：

①父组件用props传数据给子组件，

② 子组件通过$emit通知父组件修改更新

格式

2.非父子关系：

①创建一个都能访问到的事件总线（空 Vue 实例）

②  A组件（接收方），监听 Bus 实例的事件

 ③B组件（发送方），触发 Bus 实例的事件

相当于创建一个链接AB的媒介，然后再进行信息传输

非父子关系（爷孙类）provide &inject

格式：

注意：这个provide &inject只能使用在有层级关系的组件中

绑定父、子组件的数据

1、v-model

在讲组件中v-model的使用之前，我们先来了解一下v-model的原理

1.原理：本质是一个语法糖，实际上是value属性和input事件的合写

2.作用：提供表单数据的双向绑定

因为在组件中，谁提供的数据就只能谁来修改，所以一般在组件中，需要拆解v-model使用

1.父传子:数据是父组件 props 传递过来的，需要拆解v-model绑定数据

2.子传父:监听输入，子传父传值给父组件修改

格式：

子组件中：props通过value接收，事件触发input

父组件中：v-model给组件直接绑定数据

2、.sync 修饰符

1.作用:可以实现子组件与父组件数据的双向绑定，简化代码

2.特点:prop属性名，可以自定义，非固定为value

3.场景:封装弹框类的基础组件，visible属性： true显示 false隐藏

4.本质:就是 :属性名 和 @update:属性名 合写

格式：