vue每次点击弹框重新加载子组件

需求：每次点击重新加载子组件，传入参数，进行选人的校验

父组件

使用v-if="showIntercomGroup"控制，每次打开弹框都重新加载组件

<div v-if="showIntercomGroup">
   <el-dialog title="选择 " class="el-dialogStyle" :visible.sync="showIntercomGroup"
              width="70%"
              center
              top="6vh"
   >
       <IntercomGroup style="z-index: 999999" :FleetId="scsFleetId" :userId="user.userId" :courentType="type" @changeShow="handleChildClose" @childConfirm="childHandleConfirm(arguments)" ref="addOrUpdateRef"></IntercomGroup>
   </el-dialog>
</div>

子组件

<TabPane label="群组" icon="ios-people">
     <div class="tree-self">
     <el-tree
       check-strictly
       :load="loadGroupChildren"
       show-checkbox
       highlight-current
       lazy
       node-key="id"
       :props="defaultProps"
       :filter-node-method="filterNode"
       ref="grouptree"
       @check-change="handleCheckChange"
     >
           <span class="custom-tree-node" style="font-size: 14px" slot-scope="{ node, data }">
                 <span v-if="data.type===0"><img src="@/assets/images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                 <span v-if="data.type===1"><img src="@/assets/images/mapicon/tree_fleet.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                 <span v-if="data.type===3"><img src="@/assets/images/mapicon/tree_group.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
                 <span v-if="data.type===2"><img src="@/assets/images/mapicon/tree_sub.png" style="height: 15px;width: 15px;margin-right: 10px;vertical-align: middle">{{ node.label }}</span>
          </span>
     </el-tree>
     </div>
   </TabPane>

通过this.courentType判断是父组件传过来的选择类型，从而进行数据筛选，例如添加会话成员就不允许选择群组

export default {
    name: 'IntercomGroup',
    props: {
      msg: String,
      states: Boolean,
      addOrUpdateVisible: {
        type: Boolean,
        default: false
      },
      courentType: String,
      FleetId: Number,
      userId: Number
    },

    data () {

      const data = [
        {
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }]
          }]
        }, {
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }]
          }]
        }
      ]
      return {
        showMenu:false,
        saveDatas:[],//保存坐席集团数据
        defaultProps: {
          label: 'name',
          isLeaf: 'isLeaf'
        },
        SystemAddressBookdefaultProps: {
          label: 'name',
          isLeaf: 'isLeaf'
        },
        agentDefaultProps: {
          label: 'name',
          isLeaf: 'isLeaf'
        },
        money: '',
        isShowTree: true,
        //弹框
        IntercomGroup: false,
        IntercomGroup2: false,
        data: JSON.parse(JSON.stringify(data)),
        tableData: [{
          key: 1,
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
    
        chooseDatas: [
          {
            extnum: "5206",
            id: 1022,
            name: "dwinner",
            number: "dwinner",
            type: 5
          },    {
            System_type_num: "110",
            extnum: "3003",
            id: 1603013,
            name: "1603013",
            number: "1603013",
            type: 5
          },
        ],

        type: ''
      }
    },
    watch: {
      // 监听 addOrUpdateVisible 改变
      addOrUpdateVisible (oldVal, newVal) {
        this.IntercomGroup = this.addOrUpdateVisible
      },

    },
     methods: {
     //群组节点数据
      loadGroupChildren: function (node, resolve) {
        if (node.data) {
          this.getGroupChild(node.data.id, node.data.type, resolve)
        } else {
          setTimeout(() => {
            this.getGroupChild(this.FleetId, 0, resolve)
          }, 0)
        }

      },
         getGroupChild (id, type, resolve) {
        CommonChooseDialogApi.getGroup({
          parentId: id,
          type: type,
          user: 0,
          managePriv: '0'
        })
          .then((res)=> {
          if (this.courentType !=''||this.courentType != 'undefined'){
            switch (this.courentType) {
              case 'messagesAddMerber': //针对消息模块-会话添加成员过滤群组
                console.log("会话添加成员过滤群组");
                if(res.success){
                  var childNodes = [];
                  var changeData = [];
                  if (res.obj && res.obj.length>0) {
                    changeData = res.obj;
                    for(var i=0;i<changeData.length;i++){
                      if(changeData[i].type ==2){
                        changeData[i].isLeaf=true;
                      }
                      if (changeData[i].type ==1 ||changeData[i].type ==3 ){
                        changeData[i].disabled=true;
                      }
                    }
                    childNodes = changeData;
                  }else {
                    /* var node = this.$refs.grouptree.getNode(id);
                     node.loading = false;
                     return*/
                  }
                  resolve(childNodes);
                }
                break
              case 'intercomBoxEntrancePocAdd': //针对对讲模块-过滤集团、话机
                if(res.success){
                  var childNodes = [];
                  var changeData = [];
                  if (res.obj && res.obj.length>0) {
                    changeData = res.obj;
                    for(var i=0;i<changeData.length;i++){
                      if(changeData[i].type ==2){
                        changeData[i].isLeaf=true;
                      }
                      if (changeData[i].type ==1 ||changeData[i].System_type_num =='102'){
                        changeData[i].disabled=true;
                      }
                    }
                    childNodes = changeData;
                  }else {
                    /* var node = this.$refs.grouptree.getNode(id);
                     node.loading = false;
                     return*/
                  }
                  resolve(childNodes);
                }
                break
              case 'messagesAddConversationRecord': //针对消息添加会话处理
                if(res.success){
                  var childNodes = [];
                  var changeData = [];
                  if (res.obj && res.obj.length>0) {
                    changeData = res.obj;
                    for(var i=0;i<changeData.length;i++){
                      if(changeData[i].type ==2){
                        changeData[i].isLeaf=true;
                      }
                      if (changeData[i].type ==1 ||changeData[i].System_type_num =='102'){
                        changeData[i].disabled=true;
                      }
                    }
                    childNodes = changeData;
                  }else {
                    /* var node = this.$refs.grouptree.getNode(id);
                     node.loading = false;
                     return*/
                  }
                  resolve(childNodes);
                }
                break
              default:
                if(res.success){
                  var childNodes = [];
                  var changeData = [];
                  if (res.obj && res.obj.length>0) {
                    changeData = res.obj;
                    for(var i=0;i<changeData.length;i++){
                      if(changeData[i].type ==2){
                        changeData[i].isLeaf=true;
                      }
                      if (changeData[i].type ==1){
                        changeData[i].disabled=true;
                      }
                    }
                    childNodes = changeData;
                  }else {
             var node = this.$refs.grouptree.getNode(id);
                  node.loading = false;
                  return
                  }
                  resolve(childNodes);
                }
            }

          }else {
            if(res.success){
              var childNodes = [];
              var changeData = [];
              if (res.obj && res.obj.length>0) {
                changeData = res.obj;
                for(var i=0;i<changeData.length;i++){
                  if(changeData[i].type ==2){
                    changeData[i].isLeaf=true;
                  }
                  if (changeData[i].type ==1){
                    changeData[i].disabled=true;
                  }
                }
                childNodes = changeData;
              }else {
                /* var node = this.$refs.grouptree.getNode(id);
                 node.loading = false;
                 return*/
              }
              resolve(childNodes);
            }
          }

          })
          .catch(function (error) {
            console.log(error)
          })

      },
      handleCheckChange:function(data, checked, indeterminate) {
        console.log(data);
        // if( data.type === 2  && checked ){
        if(checked ){
          var nodeObj={};
          nodeObj.id=data.id;
          nodeObj.type=data.type;
          nodeObj.extnum = data.extnum;
          nodeObj.number = data.number;
          nodeObj.systemNumber = data.System_type_num;
          if(data.name.length>10){
            nodeObj.name=data.name.substring(0,10)+'...';
          }else{
            nodeObj.name=data.name;
          }
          var length=false;
          for(var i=0;i<this.chooseDatas.length;i++){
            if(data.id === this.chooseDatas[i].id){
              length=true;
            }
          }
          if(!length){
            this.chooseDatas.push(nodeObj);
          }
        // }else if(data.type === 2  && !checked ){
        }else if(!checked ){
          for(var i=0;i<this.chooseDatas.length;i++){
            if(data.id ===this.chooseDatas[i].id){
              this.chooseDatas.splice(i,1);
            }
          }
        }
      },
      deleteMember (id) {
        for(var i=0;i<this.chooseDatas.length;i++){
          if(id === this.chooseDatas[i].subId){
            this.chooseDatas.splice(i,1);
            var node = this.$refs.grouptree.getNode(id);
            node.checked = false;
          }
        }
      },
}

子组件确认提交

  //确定提交，调用父组件方法，传递数据
      handleConfirm () {
        this.$emit('childConfirm', this.chooseDatas, this.courentType)
        this.IntercomGroup = false
        this.chooseDatas = []
        this.money = ''
      },

父组件监听确认，拿到数据

 // 监听 子组件点击确定提交后触发，由子组件调用
      childHandleConfirm(data) {
        let choosedDatas = data[0]; //已经选择的array数据
        let type = data[1]; //当前需要处理的type
        if (type) {
          switch (type) {
            case 'intercomBoxEntrancePocAdd':   //对讲入口，添加对讲
              this.startPocAdd(choosedDatas);
              break;
            case 'messagesAddMerber':   //处理添加会话成员
              this.addGroupMember(choosedDatas);

              break;
            case 'messagesAddConversationRecord':   //处理添加会话
              this.addConversationRecord(choosedDatas);
              break;
          
          }
        }
      }

效果