目录
1、vue2 中，父组件调用子组件的方法
2、vue3 中，父组件调用子组件的方法
1、vue2 中，父组件调用子组件的方法
在Vue 2中，父组件可以通过使用ref属性来引用子组件的实例，然后通过该实例调用子组件的方法。
首先，在父组件的模板中，给子组件添加一个ref属性：
<template> <div> <child-component ref="childRef"></child-component> </div></template>然后，在父组件的JavaScript代码中，可以通过this.$refs访问到子组件的实例，从而调用子组件的方法：
<script>import ChildComponent from './ChildComponent.vue';export default { components: { ChildComponent }, methods: { callChildMethod() { this.$refs.childRef.childMethod(); // 调用子组件方法 } }}</script>请注意，childMethod()是子组件中定义的一个方法，你需要根据实际情况替换成子组件中真正的方法名。此外，需要确保子组件已经被完全渲染和挂载，才能正确地访问到子组件的实例。
2、vue3 中，父组件调用子组件的方法
在 Vue 3 中，父组件可以直接调用子组件的方法，可以通过 ref 和 implements 来实现。
首先，在子组件中，需要将要调用的方法使用 ref 进行声明，并且在 setup 函数中返回该方法。示例代码如下：
<template> <div> <!-- 子组件内容 --> </div></template><script>import { ref } from 'vue';export default { setup() { // 声明需要调用的方法 const childMethod = ref(null); // 返回方法 return { childMethod, }; },};</script>然后，在父组件中，可以使用 refs 访问子组件，并直接调用子组件的方法。示例代码如下：
<template> <div> <!-- 父组件内容 --> <ChildComponent ref="childRef" /> <button @click="callChildMethod">调用子组件方法</button> </div></template><script>import { ref } from 'vue';export default { setup() { // 获取子组件实例 const childRef = ref(null); // 调用子组件方法 const callChildMethod = () => { childRef.value.childMethod(); // 调用子组件的方法 }; return { childRef, callChildMethod, }; },};</script>通过以上方式，父组件就可以直接调用子组件的方法了。请注意，父组件调用子组件方法的前提是子组件已经被渲染到页面上。