Vue - 子组件如何调用父组件中的方法

我不是女神ヾ 2021-07-26 00:33 916阅读 0赞

### 子组件调用父组件的三种方法 ###

*   *  一. 子组件里用$emit向父组件触发一个事件，父组件监听这个事件
     *  二. 子组件通过使用this.$parent.event
     *  三. 父组件通过绑定方式把方法名传给子组件，在子组件里调用这个方法

## 一. 子组件里用$emit向父组件触发一个事件，父组件监听这个事件 ##

父组件

<template>
      <div>
        <el-button @click="show">展开子组件抽屉</el-button>
        
        <el-drawer
          title="我是标题"
          :visible.sync="drawerVisible"
          :with-header="false"
          :before-close="handleClose"
        >
          
          
          <child @hideMethods="hideDrawer"></child>
        </el-drawer>
      </div>
    </template>
    
    <script>
    //子组件的地址（仅供参考），以项目实际目录为准
    import child from "../test/Child.vue";
    export default {
      components: {
        child: child //子组件
      },
      data() {
        return {
          drawerVisible: false, //控制抽屉显示与隐藏
        };
      },
      methods: {
        show() {
          //展开抽屉
          this.drawerVisible = true;
        },
        //darwer抽屉关闭前的回调，会暂停 Drawer 的关闭
        handleClose() {},
        //被子组件执行的方法,接收子组件传递的数据
        hideDrawer() {
          console.log("执行到了")
          //关闭抽屉
          this.drawerVisible = false;
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

子组件

<template>
      <div>
          <el-button @click="hideDra">关闭</el-button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {};
      },
      methods: {
        //执行关闭方法
        hideDra() {
          this.$emit("hideMethods");
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

## 二. 子组件通过使用this.$parent.event ##

**注意：有时候会失效，不建议使用。**  
父组件

<template>
      <div>
        <span>这里是父组件</span>
        <el-divider></el-divider>
        <el-button @click="showDrawer">打开子组件</el-button>
        
        <el-drawer
          title="我是标题"
          :visible.sync="drawerVisible"
          :with-header="false"
          :before-close="handleClose"
        >
          
          <child></child>
        </el-drawer>
      </div>
    </template>
    
    <script>
    //子组件的地址（仅供参考），以项目实际目录为准
    import child from "../test/Child.vue";
    export default {
      components: {
        child: child //子组件
      },
      data() {
        return {
          drawerVisible: false //控制抽屉显示与隐藏
        };
      },
      methods: {
        //展开抽屉
        showDrawer(row) {
          this.drawerVisible = true;
        },
        //darwer抽屉关闭前的回调，会暂停 Drawer 的关闭
        handleClose() {},
        //将要被子组件调用的方法
        hide(){
            console.log("执行到了")
            this.drawerVisible = false;
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

子组件

<template>
      <div>
        <span>这里是子组件</span>
        <el-divider></el-divider>
        <el-row>
          <el-button size="mini" @click="hideD">关闭</el-button>
        </el-row>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        //执行父组件中的关闭方法
        hideD() {
          this.$parent.hide();
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

## 三. 父组件通过绑定方式把方法名传给子组件，在子组件里调用这个方法 ##

父组件

<template>
      <div>
        <span>这里是父组件</span>
        <el-divider></el-divider>
        <el-button @click="showDrawer">打开子组件</el-button>
        
        <el-drawer
          title="我是标题"
          :visible.sync="drawerVisible"
          :with-header="false"
          :before-close="handleClose"
        >
          
          <child :hideDrawer="hideDrawer"></child>
        </el-drawer>
      </div>
    </template>
    
    <script>
    //子组件的地址（仅供参考），以项目实际目录为准
    import child from "../test/Child.vue";
    export default {
      components: {
        child: child //子组件
      },
      data() {
        return {
          drawerVisible: false //控制抽屉显示与隐藏
        };
      },
      methods: {
        //展开抽屉
        showDrawer(row) {
          this.drawerVisible = true;
        },
        //darwer抽屉关闭前的回调，会暂停 Drawer 的关闭
        handleClose() {},
        //将要被子组件调用的方法
        hideDrawer(){
            this.drawerVisible = false;
            console.log("执行到了")
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

子组件

<template>
      <div>
        <span>这里是子组件</span>
        <el-divider></el-divider>
        <el-row>
          <el-button size="mini" @click="hideD">关闭</el-button>
        </el-row>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        hideDrawer: {
          type: Function,
          default: null
        }
      },
      methods: {
        //执行父组件中的关闭方法
        hideD() {
          if(this.hideDrawer){
              this.hideDrawer()
          }
        }
      }
    };
    </script>
    
    <style scoped>
    </style>