1、权限组件:
render函数,全局注册组件。优点:使用起来很方面,但缺点就是需要自己建立一个vue文件。
S1.
Authorized.vue是设计的权限组件(由于权限判断,如果在每个vue文件都先引入再使用会很麻烦,所以把他注册为全局,要用的话,直接使用会方面很多)
补充知识点:
a.h作为createElement的别名是Vue生态系统中的一个通用惯例,实际也是JSX所要求的【const h = this.$createElement】
b. scopedSlots作用域插槽,每个作用域都是一个返回若干VNode的函数。这边返回的就是下面的<SettingDrawer />
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?之前学习过,好像又不太能记清了...只是知道可以这么用,归根结底还是自己原理不熟悉啊...通过本篇的学习,继续来补充,上述疑问的知识点。毕竟遇到问题就要去解决,否则积累的问题只会越来越多。(不要追求速度,但也不是不要速度,心态不急)