大揭秘！vue3父组件搞定子组件方法的超强指南！

2023-10-17 12:39:03

父组件与子组件方法调用指南

在 Vue3 中，父组件和子组件之间的沟通尤为灵活。 本文将深入探讨如何使用 setup API 和 option API 两种方式在父组件中调用子组件方法。我们还将提供代码示例，帮助您轻松理解和应用这些方法。

1. 使用 setup API

setup API 是 Vue3 中引入的新特性，可使用函数定义组件逻辑。借助 ref，您可以在 setup 函数中获取子组件实例并调用其方法。

示例：

父组件：

<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  setup() {
    const child = ref(null);

    const callChildMethod = () => {
      child.value.childMethod();
    };

    return {
      child,
      callChildMethod,
    };
  },
};
</script>

子组件：

<template>
  <div>
    <h1>子组件</h1>
    <button @click="childMethod">子组件的方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件的方法被调用了！');
    },
  },
};
</script>

2. 使用 option API

option API 是 Vue2 中传统的组件逻辑定义方式。使用 refs，您可以在组件选项中获取子组件实例并调用其方法。

示例：

父组件：

<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    },
  },
};
</script>

子组件：

<template>
  <div>
    <h1>子组件</h1>
    <button @click="childMethod">子组件的方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件的方法被调用了！');
    },
  },
};
</script>