当前位置：首页 > news >正文

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

news 来源：原创 2025/4/20 11:04:07

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