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

一. $emit

子组件使用$emit向父组件触发一个事件，父组件监听这个事件。

父组件

<template>
  <div>
    <!-- 子组件：通过方法监听子组件的状态 -->
    <child @handleClick="changeChild"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  components: {
    Child
  },
  data() {
    return {};
  },
  methods: {
    // 被子组件执行的方法
    changeChild() {
      console.log("执行到了");
    }
  }
};
</script>

<style scoped>
</style>

子组件

<template>
  <div>
    <button @click="toParent">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toParent() {
      // 使用 emit 触发父组件的方法
      this.$emit("handleClick");
    }
  }
};
</script>

<style scoped>
</style>

二. v-bind

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

父组件

<template>
  <div>
    <child :changeChild="changeChild"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  components: {
    Child
  },
  data() {
    return {};
  },
  methods: {
    //被子组件执行的方法
    changeChild() {
      console.log("执行到了");
    }
  }
};
</script>

<style scoped>
</style>

子组件

<template>
  <div>
    <button @click="toParent">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  props: {
    changeChild: {
      type: Function, //限制函数类型
      default: null
    }
  },
  data() {
    return {};
  },
  methods: {
    toParent() {
      if (this.changeChild) {
        this.$parent.changeChild();
      }
    }
  }
};
</script>

<style scoped>
</style>

三. this.$parent.event

子组件通过使用this.$parent.event调用父组件方法。
注意：有时候会失效，不建议使用。

父组件

<template>
  <div>
    <child></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  components: {
    Child
  },
  data() {
    return {};
  },
  methods: {
    //被子组件执行的方法
    changeChild() {
      console.log("执行到了");
    }
  }
};
</script>

<style scoped>
</style>

子组件

<template>
  <div>
    <button @click="toParent">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toParent() {
      this.$parent.changeChild();
    }
  }
};
</script>

<style scoped>
</style>