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-checkboxnode-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.checkedKeysreturn 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会监听到变化，并执行相应的操作来更新子组件中的相关数据和界面。