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()是子组件中定义的一个方法，你需要根据实际情况替换成子组件中真正的方法名。此外，需要确保子组件已经被完全渲染和挂载，才能正确地访问到子组件的实例。
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>通过以上方式，父组件就可以直接调用子组件的方法了。请注意，父组件调用子组件方法的前提是子组件已经被渲染到页面上。
原文始发于微信公众号（前端爱好者）：vue 中父组件直接调用子组件方法
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267312.html
