页面引入子组件，并调用子组件中方法

你的名字 2023-06-23 03:58 8阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
按钮中绑定事件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]  
事件中调用子组件方法，同时对方法中传入参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]  
封装的子组件：

<template>
      <div class="execution">
        <basic-container>
          <avue-crud ref="crud"
                     :data="tableData"
                     :table-loading="tableLoading"
                     :option="tableOption">
          </avue-crud>
        </basic-container>
      </div>
    </template>
    
    <script>
      import * as hyjbxx from '@/const/crud/hygl/hyjbxx'
      import * as rfjrcpxx from '@/const/crud/hygl/rfjrcpxx'
      import * as rfjkcpxx from '@/const/crud/hygl/rfjkcpxx'
      import * as rfjrtzjy from '@/const/crud/hygl/rfjrtzjy'
      import * as rfjktzjy from '@/const/crud/hygl/rfjktzjy'
      import * as rfjfzs from '@/const/crud/hygl/rfjfzs'
      import * as rflcbg from '@/const/crud/hygl/rflcbg'
      import * as rfyjjyhf from '@/const/crud/hygl/rfyjjyhf'
      import * as rflpzlxx from '@/const/crud/hygl/rflpzlxx'
      import * as rflcbgmb from '@/const/crud/hygl/rflcbgmb'
    
      import store from '@/store'
    
      export default { 
        name: 'ShowSpywDxView',
        data() { 
          return { 
            tableLoading: false,
            tableData:[],
            tableOption: [],
            headers: { 
              Authorization: 'Bearer ' + store.getters.access_token
            },
            colums:{ 
              lc1:rfjrcpxx,
              lc2:rfjrcpxx,
              lc3:rflpzlxx,
              lc4:rflpzlxx,
              lc5:rflcbg,
              lc6:rfjrtzjy,
              lc7:hyjbxx,
              lc8:rfjfzs,
              lc9:rfjkcpxx,
              lc10:rfjkcpxx,
              lc11:rfjktzjy,
              lc12:rflcbgmb,
              lc13:rfyjjyhf
            }
          }
        },
        computed: { 
          /*...mapGetters(['themeName'])*/
        },
        watch: { 
    
        },
        mounted() { 
    
        },
        methods: { 
          showRowForm:function(lcid,row){ 
            console.log(row)
            this.tableData=[]
            this.tableData.push(row)
            this.tableLoading=true
            if ((this.colums["lc"+lcid]) && (this.colums["lc"+lcid].tableOption)){ 
              this.tableOption=this.colums["lc"+lcid].tableOption
              this.$refs.crud.rowView(row, 0)
              //this.$refs.crud.rowEdit(row, 0)
            }else { 
              this.$message.warning(`该流程信息未配置，请与管理人员联系！`);
              return
            }
          }
        }
      }
    </script>
    
    <style lang="scss" scoped>
      /* .list { width: 100%; }*/
      /*导入弹窗文件加载样式*/
      .importIconForm{ 
        height:250px;
        position:relative;
      }
      .importIcon{ 
        position:absolute;
        top:30%;
        left:45%;
      }
      .importIcon h3{ 
        margin-left:-30px;
      }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191217143227972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191217143308890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191217143355839.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70