后台管理项目相关笔记

一、组件通信的方式 1. event 深入

事件包括系统事件、自定义事件

关键点：事件源、事件类型、事件回调

1. 原生DOM ------ 如button可以绑定系统事件 ------ 如click单击事件等

2. 组件标签 ------ 可以绑定系统事件（但不起作用，因为默认当作自定义事件。自定义标签，只要不加native的都是自定义事件）------ 需要加修饰符.native，就可以把这个自定义事件视为原生DOM事件

给原生DOM绑定自定义事件是没有意义的，因为没有办法触发$emit函数

2. v-model 深入

 

 

3. 属性修饰符sync（组件通信方式的一种）

可以实现父子组件数据同步（和v-model一样，本质是语法糖）

:money.sync 代表父组件给子组件传递了一个props叫money，并且给当前的子组件绑定了一个自定义事件（update:money）

 

4. $attrs 和 $listeners

$attrs 是组件实例自身的属性（返回的是一个对象），可以获取到父组件传递过来的props数据。

对于子组件而言，父组件给的数据可以利用props接收，但是需要注意，如果子组件通过props接收了一部分属性，这部分在$attrs属性中是获取不到的。

$listeners 也是组件实例自身的属性，可以获取到父组件给子组件传递的自定义事件

案例：二次封装饿了么按钮组件（让其具有hover提示）

 

5. $children 与 $parent

在Vue中可以通过ref获取某一个子组件，就可以 *** 作子组件的数据和方法

$children 是组件实例的属性（返回的是一个数组），可以获取到当前组件的全部子组件

尽可能不用$children[0]、$children[1]的形式，容易搞错

 $parent 是组件实例的属性，可以获取到当前组件的父组件

 

补充：混入 mixin

如果项目中出现很多结构类似的功能，想到组件复用

如果项目中很多组件的JS业务逻辑相似，想到mixin（可以把多个组件的JS部分重复、相似部分提取出来）

6. 插槽

可以实现父子组件通信（通信的是结构）

默认插槽、具名插槽、作用域插槽（子组件的数据来源于父组件，但是子组件决定不了自身的结构与样式）