后台管理项目相关笔记

一、组件通信的方式

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. 插槽

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

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

二、项目相关补充

1. Vue.set 和 $set

添加响应式属性

Vue.set( target, propertyName/index, value )

• 参数：

  • {Object | Array} target  目标对象
  • {string | number} propertyName/index  属性
  • {any} value  属性值

• 返回值：设置的值。

• 用法：

  向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

• 注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

• vm.$set( target, propertyName/index, value )

• 这是全局 Vue.set 的别名。

• 参考：Vue.set

2. 深度选择器

如果父组件的样式(scoped)，还想影响到子组件的样式。此时可以使用深度选择器，实现样式穿透。

原生css     >>>

less           /deep/

scss          ::v-deep

3. 权限管理

菜单权限：不同的用户，能操作、观看的菜单是不同的。当获取用户信息时，服务器会把该用户拥有的菜单的权限信息（数组routes）返回，需要根据用户的身份对比出当前用户需要展示哪些菜单。

按钮权限：不同的用户，有的用户可见某个按钮，有的用户不可见某个按钮。通过判断按钮是否在vuex存储的该用户的按钮权限数组中，确定按钮是否对该用户显示，判断后用v-show实现。