Vue - 子组件如何调用父组件中的方法-蒲公英云

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

- 一. 子组件里用$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>