网站 › 『编程语言讨论求助区』 › vue3父子组件如何调用方法

墙边等红杏 发表于 2023-12-20 15:44

vue3父子组件如何调用方法

本帖最后由 墙边等红杏 于 2023-12-21 09:06 编辑

我的问题：父组件引用子组件，父组件有一个按钮，点击后就调用子组件的getdata方法发起网络请求




问了ChatGPT给出的答案点了就报错


我是参考了这篇文章：https://blog.csdn.net/chenhaiy/article/details/124053114


这篇文章有用，但是是子组件调用父组件，把父子组件对调就没有效果

我的代码：





<template>
<div class="box">
<div>父组件</div>
<input type="text" v-model="sub_content">
<button type="button" @click="search">搜索</button>
</div>
<Demo2 ref="getData" @getData="getDataParent"/>
</template>

<script setup>
import Demo2 from "@/components/demo2.vue";
import {ref} from 'vue';
const search = () => {
// 这里需要触发子组件的getData方法
};

</script>

<style scoped>

</style>




<template>
<div class="box">
<div>子组件</div>
</div>
</template>

<script setup>
import {defineExpose} from 'vue'

const getData = (content) => {
// 这个content是由父组件传过来的
console.log("子组件接收到的内容：", content);
};
defineExpose({getData})

</script>



参考文章：https://www.jb51.net/javascript/305116lhy.htm

dianjie 发表于 2023-12-20 15:59

https://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component

xjy666 发表于 2023-12-20 16:00

搜一搜vue3使用ref调用子组件方法

7593454 发表于 2023-12-20 16:09

本帖最后由 7593454 于 2023-12-20 16:14 编辑

子组件调用父组件：
子组件：const emit = defineEmits(['getData']);
const emitFunc = ()=>{
emit ('getData')
}
父组件：
<template>
.....你的代码
<EmitProp @getData="getDataParent"></EmitProp >
</template>
import EmitProp from '..emitprop'
const getDataParent = ()=>{
console.log('调用这个方法')
}
这样在子组件调用emitFunc函数的时候，就会调用父组件的getDataParent函数
父组件调用子组件：
子组件：
const childFunc = ()=>{
console.log("调用这个方法")
}
defineExpose({
    childFunc,
});
父组件：
<template>
.....你的代码
<EmitProp ref="childRef"></EmitProp >
</template>
import {ref} from 'vue';
import EmitProp from '..emitprop'
const childRef = ref()
const getDataParent = ()=>{
childRef.value.childFunc()
}
这样父组件调用getDataParent函数的时候就调用了子组件的childFunc函数

武帝是多么寂寞 发表于 2023-12-20 17:17

为啥吾爱会出现这种帖子？

15778063790 发表于 2023-12-20 17:38

不错，有点东西

爱吃鹅肉饭 发表于 2023-12-20 17:55

兄弟建议你看看vue3的官方文档，子组件可以暴露自身的方法，父组件可以直接调用

Jack-lee 发表于 2023-12-20 18:31

https://blog.csdn.net/weixin_48927323/article/details/125486312?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170306819516800188567159%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170306819516800188567159&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-125486312-null-null.142^v96^pc_search_result_base7&utm_term=vue3%E4%B8%AD%E5%AD%90%E5%90%91%E7%88%B6%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC&spm=1018.2226.3001.4187

啊笨 发表于 2023-12-20 19:30

可以考虑下VueX
用这个比较简单

墙边等红杏 发表于 2023-12-20 22:29

Jack-lee 发表于 2023-12-20 18:31
https://blog.csdn.net/weixin_48927323/article/details/125486312?ops_request_misc=%257B%2522request%2 ...

传值我会用，关键是调用方法不会

查看完整版本: vue3父子组件如何调用方法