Vue学习笔记：vue权限设计（权限组件、权限指令）

1、权限组件：

render函数，全局注册组件。优点：使用起来很方面，但缺点就是需要自己建立一个vue文件。

S1.

Authorized.vue是设计的权限组件（由于权限判断，如果在每个vue文件都先引入再使用会很麻烦，所以把他注册为全局，要用的话，直接使用会方面很多）

补充知识点：

a.h作为createElement的别名是Vue生态系统中的一个通用惯例，实际也是JSX所要求的【const h = this.$createElement】

b. scopedSlots作用域插槽，每个作用域都是一个返回若干VNode的函数。这边返回的就是下面的

c.用functional将组件标记为函数式组件（函数式组件只是函数），意味他无状态（没有响应式数据），也没有实例（没有this上下文），所以为了弥补缺少的实例，render函数传入第二个参数作为上下文

参考Vue官方指南：https://cn.vuejs.org/v2/guide/render-function.html#%E6%8F%92%E6%A7%BD

S2.

将自定义的vue组件进行全局注册（在main.js中全局注册），通过Vue.component

S3.

如何使用全局的组件（其实就是和使用普通的组件一样，简单~） 。admin可以设置主题，而其他角色不可以

2、权限指令

可以方便的对一些按钮，图标进行权限控制。 但缺点是，如果权限是动态变化的，只会初始化一次（但正常一个角色被确定之后，就不会动态变化）

S1.

自定义指令

S2.

注册，通过使用Vue.use

S3.

使用指令v-auth，只有admin可以看到这个图标

学习总结：

1、权限这两种方式，是学到了，但函数式组件？render函数？scopedSlots？之前学习过，好像又不太能记清了...只是知道可以这么用，归根结底还是自己原理不熟悉啊...通过本篇的学习，继续来补充，上述疑问的知识点。毕竟遇到问题就要去解决，否则积累的问题只会越来越多。（不要追求速度，但也不是不要速度，心态不急）