【Vue】9.vue中子组件调用父组件的方法

最新推荐文章于 2025-07-11 17:56:16 发布

Anabel Chen

最新推荐文章于 2025-07-11 17:56:16 发布

阅读量9.1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：【Vue】文章标签： vue 子组件调用父组件方法

本文链接：https://blog.youkuaiyun.com/benben513624/article/details/86657914

【Vue】专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍在Vue.js中子组件如何调用父组件的方法，提供了三种实用方式：直接通过this.$parent访问，使用$emit触发事件由父组件监听，以及将父组件方法作为属性传递给子组件。每种方法都附带代码示例，便于理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中子组件调用父组件的方法，这里总结了三种：

1.直接在子组件中通过this.$parent.event来调用父组件的方法

Parent.vue

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

<script>
  import Child from '../../components/Child.vue';

    export default {
      data() {
        return {
          name: 'Parent',
        };
      },
      methods: {
        fatherMethod() {
          console.log('testing');
        },
      },
      components: {
        child: Child,
      },
    };
</script>

<style scoped>

</style>

Child.vue

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

<script>
  export default {
    data() {
      return {
        name: 'Child',
      };
    },
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      },
    },
  };
</script>

<style scoped>

</style>

2.在子组件里用$emit()向父组件触发一个事件，父组件监听这个事件就行了

Parent.vue

<template>
    <div>
      <child v-on:fatherMethod="fatherMethod"></child>
    </div>
</template>

<script>
  import Child from '../../components/Child.vue';

    export default {
      data() {
        return {
          name: 'Parent',
        };
      },
      methods: {
        fatherMethod() {
          console.log('testing');
        },
      },
      components: {
        child: Child,
      },
    };
</script>

<style scoped>

</style>

Child.vue

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

<script>
  export default {
    data() {
      return {
        name: 'Child',
      };
    },
    methods: {
      childMethod() {
        // this.$parent.fatherMethod();
        this.$emit('fatherMethod');
      },
    },
  };
</script>

<style scoped>

</style>

3.父组件把方法传入子组件中，在子组件里直接调用这个方法

Parent.vue

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

<script>
  import Child from '../../components/Child.vue';

    export default {
      data() {
        return {
          name: 'Parent',
        };
      },
      methods: {
        fatherMethod() {
          console.log('testing');
        },
      },
      components: {
        child: Child,
      },
    };
</script>

<style scoped>

</style>

Child.vue

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

<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null,
      },
    },
    data() {
      return {
        name: 'Child',
      };
    },
    methods: {
      childMethod() {
        // this.$parent.fatherMethod();
        // this.$emit('fatherMethod');
        this.fatherMethod();
      },
    },
  };
</script>

<style scoped>

</style>