watch()监听vue2项目角色权限变化更新挂载

<template> <div> <el-form :model="updateRole" ref="roleForm" label-width="100px" label-position="right" style="width: 400px" :rules="roleRules" > <el-form-item label="角色名称" prop="name"> <el-input v-model="updateRole.name"></el-input> </el-form-item> <el-tree :data="authList" show-checkbox node-key="index" :default-expanded-all="true" :default-checked-keys="checkedKeys" @check-change = "handleCheckChange" ref="tree" > </el-tree> </el-form> </div> </template> <script> // 引入权限列表对象数组 import menuList from "@/config/menuConfig" export default { data() { return { updateRole: { name: "", }, roleRules: { name: { required: true, message: "请输入角色名称", trigger: "blur" }, }, authList:[],//树形空间元素数组 checkedKeys:[],//树形控件选中项数组 }; }, // prop接收父组件传递过来的:role信息 props: ["role"], mounted() { // 通过props接收到了以后还要在mounted生命周期钩子函数中为updateRole赋值 this.updateRole = { ...this.role }; this.authList = this.getAuthNodes(menuList); this.checkedKeys = this.role.menus }, watch:{ role(val){ if(val){ console.log('val',val); // 更新需要修改的角色对象 this.updateRole = {...val} // 更新属性控件选中项数组 this.checkedKeys = val.menus // 设置勾选的节点 this.$refs['tree'].setCheckedKeys(this.checkedKeys) } } }, components: {}, methods: { // 树形控件元素点击回调 handleCheckChange(data,checked,indeterminate){ if(checked){ // 如果选中项不是students并且在选中项数组中不存在，再添加到数组中，防止重复添加 if(data.index != "/students" && this.checkedKeys.indexOf(data.index) == -1){ this.checkedKeys.push(data.index) } }else{ // 判断当前要删除的元素是在数组中存在的 let index = this.checkedKeys.indexOf(data.index) if(index != -1 && index != 0){ this.checkedKeys.splice(index,1) } } console.log("this.checkedKeys",this.checkedKeys); }, // 根据权限列表数组将元素对象中的属性替换为树形控件中的名称 getAuthNodes(menuList){ return menuList.map((item)=>{ // 一级列表 if(!item.children){ return{ index:item.index, label:item.title, }; }else{ // 多级列表 return{ index:item.index, label:item.title, // 递归处理多级列表 children:this.getAuthNodes(item.children) }; } }); }, // 为父组件提供数据（选中了哪些权限---checkedKeys） getMenus(){ this.updateRole.menus = this.checkedKeys return this.updateRole } }, }; </script> <style scoped> </style>

在这段代码中，watch监听的role是来自父组件通过props传递给子组件的role属性。在子组件的props属性中定义了props: ["role"]，表示子组件接收一个名为role的属性。通过this.role可以获取到父组件传递的role属性的值。在mounted钩子函数中，将父组件传递的role赋值给了updateRole，然后在watch中监听role的变化，一旦role发生变化，就更新updateRole的值，并将选中的菜单项更新到checkedKeys中。

这段代码中的this.$refs['tree'].setCheckedKeys(this.checkedKeys)的作用是将checkedKeys数组中的值设置为树形控件中的选中项。具体来说，它将根据checkedKeys数组中的索引值来勾选树形控件中对应的节点，实现了将之前选中的权限重新勾选的效果。 

在这段代码中，role是一个props属性，它来自父组件的传递。因此，role的变化是由父组件决定的。当父组件中传递给子组件的role属性发生变化时，watch会监听到这个变化，并执行相应的回调函数。

具体来说，在父组件中更新了role属性的值，并传递给子组件时，子组件的role属性会发生变化。这可能是因为父组件中的数据发生了变化，或者是父组件重新渲染了。无论是哪种情况，只要父组件更新了传递给子组件的role属性，子组件中的watch就会监听到这个变化，并执行相应的回调函数。

在这段代码中，当role发生变化时，watch会执行以下操作：

将role的值赋给updateRole，用于更新需要修改的角色对象。将role.menus的值赋给checkedKeys，用于更新树形控件的选中项数组。使用this.$refs['tree'].setCheckedKeys(this.checkedKeys)将checkedKeys数组中的值设置为树形控件中的选中项。

总结起来，当父组件更新传递给子组件的role属性时，watch会监听到变化，并执行相应的操作来更新子组件中的相关数据和界面。