高阶组件方案

1. 高阶组件的思路

概念：把组件当成参数传给另一个组件，返回一个包装过的新组件

2. 定义组件

关键点：如何把按钮组件当成参数传入并且在高阶组件内部获取到它，答案就是插槽和render函数

<script>
export default {
  props: {
    btnPerm: {
      type: String,
      default: ''
    }
  },

  render(h) {
     // 如何获职父组件传过来的待显示的按钮组件?
    // 如何在render中获职插槽模版?
    // template slot接收插槽参数
    // render this.$slots.插槽的名称
    / 获职当前用户下所有的权限标识
    const permissions = this.$store.state.user.userProfile.permissions
    // 判断props传入的当前按钮的权限标识this.btnPerm是否能在用户的权限列表中permissions找到
    // 如果能找到 则正常返回按讯组件 如果找不到什么都不返回
    const isShow = permissions.includes(this.btnPerm)
    // 如果isShow为true 代表找到了 显示出来传入的要显示的button组件
    return isShow && this.$slots.default
  }
}
</script>

3. 使用组件

<auth-button btn-perm="park:building:remove">
  <el-button size="mini" type="text" @click="confirmDel(scope.row.id)">删除</el-button>
</auth-button>


<auth-button btn-perm="park:building:add_edit">
  <el-button type="primary" @click="addBuilding">添加</el-button>
</auth-button>