Vue 组件通信如何通过 Props 传递权限按钮列表中可用的操作标识

用Props传权限按钮列表，核心是父组件将后端返回的权限标识数组（如["add","edit"]）通过v-bind传给子组件，子组件用defineProps接收并用v-if动态渲染或禁用按钮，同时需配合后端接口权限校验确保安全。

用 Props 传权限按钮列表，核心是把后端返回的可操作标识（比如 ["add", "edit", "delete"]）作为数组或对象，由父组件传给按钮容器子组件，子组件再据此动态渲染或禁用对应按钮。

明确权限数据结构和来源

权限标识通常来自登录后接口返回的用户角色权限字段，例如：

1. userPermissions: ["user:add", "user:edit", "order:view"]
2. 或更简洁的业务标识：actions: ["add", "edit", "remove"]

父组件在获取到该数据后，直接绑定为 props 传给操作栏组件，不建议在子组件里二次请求或硬编码。

父组件传参：用 v-bind 绑定权限数组

父组件模板中，把权限列表作为响应式变量传入：

<ActionButtons :permissions="userPermissions" />

脚本部分确保变量已定义：

const userPermissions = ref(['add', 'edit'])

若权限是嵌套结构（如带按钮文案、图标），可传对象数组：[{ key: 'add', label: '新增', icon: 'plus' }]，子组件统一按 key 做判断。

子组件接收与使用：defineProps + 条件渲染

子组件用 defineProps 明确接收，并在模板中结合 v-if 或 v-show 控制按钮显隐：

const props = defineProps({ permissions: { type: Array, default: () => [] } })

模板中判断示例：

<button v-if="props.permissions.includes('add')" @click="handleAdd">新增</button><button v-if="props.permissions.includes('edit')" @click="handleEdit">编辑</button>

注意：不要在子组件内修改 props.permissions，如需过滤或转换，应基于它生成新变量（如 computed 计算属性）。

配合角色/菜单级权限做兜底校验

仅靠前端 props 判断存在绕过风险。实际项目中，应：

1. 后端接口仍需校验权限，防止恶意请求
2. 按钮点击时再次检查权限（尤其涉及敏感操作），避免仅靠 DOM 隐藏就认为安全
3. 若权限粒度细（如按按钮、字段、行操作），建议将权限 key 设计为层级路径，如 "user:list:delete"