【vue】父组件调用子组件函数方法

最新推荐文章于 2025-06-25 09:31:16 发布
原创 最新推荐文章于 2025-06-25 09:31:16 发布 · 478 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue #父子组件

本文分享了一位新手程序员在搭建后台管理系统过程中的实践心得。主要讲述了如何通过在左侧列表点击时触发右侧详情数据的动态加载，采用父组件调用子组件函数的方法解决了右侧列表数据延迟加载的问题。

一个记录萌新做后台管理系统的成长之路
需求是这样的:
左侧列表，右侧列表详情
点击左侧右侧则展示出来，但是右侧详情的数据想在左侧点击之后再执行请求
我思路也不是很完善，想到的是把 ‘加载右侧列表的请求函数’ 放在左侧点击选中后加载
刚开始的思路是右侧show则执行函数，这需要一个判断，后来就改成了左侧父组件调用右侧子组件的函数
具体代码
左侧父组件：
<Task ref="task"></Task>
在父组件包裹的子组件中添加 ref
然后再点击事件中写上 this.$refs.task.getTaskList()
在这里插入图片描述
ok，问题解决！
–每天进步一点点

Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
共同学习，共同成长
05-10 7178
Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
VUE 父组件调用子组件函数的方法
喜欢吃糖丶的博客
10-09 942
前端页面需要父组件和子组件同时加载并且子组件需要用到父组件的参数才能出数据 在父组件中引入、声明子组件 js： 引入：import iousPartH from './../../iousPartH 并且需要在components 声明引用的子组件才能使用： components: { iousPartH }, vue : <iousPartH ref="iousPartH"></iousPartH> 在父组件中定义初始化函数 methods: { //初.
Vue父组件调用子组件的函数
qq_44849271的博客
05-08 3227
Vue父组件调用子组件的函数 该篇是父组件通过事件调用子组件的函数。例如父组件通过 点击事件 让子组件发请求。
vue父组件使用子组件函数，vue子组件使用父组件函数
马优晨
04-29 3692
（1）vue中父组件调用子组件函数 用法： 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法 详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即 this.$refs.refName. 然后再进行调用，也就是 this.$refs.refName.me...
vue 父组件中调用子组件函数的方法
10-16
主要介绍了vue 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue中子组件函数的调用
风清扬的专栏
05-18 692
插槽属性：子组件定义插槽属性，父组件传入方法，子组件监听插槽事件并调用父组件方法。refs：父组件使用 ref 引用子组件，然后通过引用访问子组件方法。**$emit：**子组件通过 $emit 发射自定义事件，父组件监听事件并执行操作。在子组件中定义一个插槽属性，并传入父组件的方法。父组件可以向插槽传递值和事件，子组件可以监听插槽事件并调用父组件的方法。Vue 中的子组件可以调用其父组件的方法，也可以调用自己的方法。在父组件中使用 ref 引用子组件，然后通过该引用访问子组件的方法。
vue组件间函数调用
djz20357的博客
08-08 327
vue父子组件间函数调用 <Child ref="myChild"></Child> // 父组件 // 引入子组件 import Child from './Child' export default { // 注册子组件 components: {Child}, created () { // 调用子组件中的childMethod，并且传递...
Vue子组件向父组件通信与父组件调用子组件中的方法
08-27
Vue 子组件向父组件通信与父组件调用子组件中的方法 Vue 子组件向父组件通信是指子组件将数据或事件传递给父组件的过程，而父组件调用子组件中的方法则是指父组件可以调用子组件中的方法来实现某些功能。这两种方式...
vue中父组件调用子组件函数
流水贝长
03-03 558
用法： 子组件上定义ref="refName", 父组件的方法中用this.$refs.refName.method去调用子组件方法 详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即 this.$refs.refName. 然后再进行调用，也就是this.$refs.refName.method ...
vue中父子组件如何相互调用方法
风清扬的专栏
05-14 1926
【代码】vue中父子组件如何相互调用方法。
vue 调用子组件方法失败_vue 父组件调用子组件方法
weixin_36372014的博客
01-12 509
最近项目中用到的父子组件间的调用挺频繁的，整理下，方便以后查找。$emit、$on 方式参考子组件调用父组件方法的第二种方法。通过ref直接调用子组件方法//父组件ref="consumptionTable":billDate="billDate">this.$refs.consumptionTable.getData();//子组件props: {billDate: {type: Stri...
vue知识点三：父组件调用子组件函数
HUMM
01-27 454
child.vue <!-- * @Description: 子组件 * @Author: HMM * @Date: 2021-01-27 09:12:37 --> <template> <div>childComponent： </div> </template> <script> export default { name: 'child', methods: { childClick(e) {
【Vue】父组件如何调用子组件的函数
m0_56699208的博客
01-20 3127
使用这些方法可以实现更解耦的组件通信，特别是在需要跨多个组件或深层嵌套组件之间通信时。对于更复杂的应用，你可能需要使用 Vuex（状态管理）或全局事件总线来在组件间通信。在Vue中，父组件可以通过多种方式调用子组件的函数。
vue父组件调用子组件中的方法
MR_bailu的博客
05-13 2223
在Vue中，父组件调用子组件方法主要有两种方式：一是通过$refs直接调用，二是通过事件通信（$emit + $on）。使用$refs时，父组件在模板中为子组件标记ref属性，并通过this.$refs.refName获取子组件实例，直接调用其方法。这种方式代码简洁，但需避免过度耦合。事件通信方式则通过子组件$emit触发事件，父组件监听并处理该事件，适合需要解耦的场景，更符合单向数据流原则。两种方式各有适用场景，开发者可根据需求选择。
vue 父组件中调用子组件的方法
qq_29236119的博客
02-02 3874
Vue项目中如何在父组件中直接调用子组件的方法： 方案一：通过ref直接调用子组件的方法； //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Chil
自定义v-model事件
Pgy121的博客
09-08 3276
父组件 <template> <div class="home"> <p>{{name}}</p> <v-model v-model="name"></v-model> </div> </template> <script> import vModel from '@/components/HelloWorld' export default { name: 'home',
vue3父组件调子组件方法
最新发布
weixin_72329752的博客
06-25 1629
使用ref方式时，子组件必须通过defineExpose明确暴露方法。事件方式更适合组件间的松耦合通信。provide/inject适用于深层嵌套组件。根据具体场景选择合适的方法，ref直接调用最为简单直接，但会破坏一定程度的封装性。为子组件设置ref属性，父组件可通过ref.value直接调用子组件方法。子组件通过emit触发事件，父组件监听事件并调用方法。祖先组件提供方法，后代组件注入调用。
vue父子组件之间相互调用方法函数
weixin_46531656的博客
03-22 2181
父组件调用子组件方法： 子组件方法： 父组件调用子组件： 父组件调用子组件的方法：this.$refs.ref名.方法名 子组件调用父组件方法： 父组件方法： 子组件调用父组件方法：this.$parent.方法名 在子组件中利用this.$parent调用父组件的自定义方法，报TypeError: this.$parent.xxx is not a function的错。这里为什么出错大家自己上网查一下，其实就是父组件没有找对，具体哪没找对我也是一知半解。可以试着打印一下，看看.
vue父组件调用子组件方法，子组件调用父组件方法
Shining_F的博客
08-07 2845
在父组件中给子组件添加一个自定义函数，把父组件中的方法传递进去。子组件通过ths.$emit来触发父组件函数。2、直接在子组件中通过“this.$parent.event”来调用父组件的方法。3、父组件把方法传入子组件中,在子组件里直接调用。
vue父组件调用子组件函数
12-27
在Vue.js中，父组件想要调用子组件的函数，通常通过`props`传递数据到子组件，并在子组件内部提供一个可以被外部调用的方法。这里有几个步骤： 1. **定义子组件**：在子组件的`methods`选项中定义一个你想让父组件调用的方法，例如： ```js // 子组件.vue文件 export default { methods: { someMethod(data) { console.log('子组件执行操作:', data); } } } ``` 2. **父组件传值并调用**：在父组件模板中，将这个方法作为`prop`传递给子组件，并在需要的时候通过`this.$refs`引用子组件实例然后调用该方法，假设子组件的`ref`名为`myChild`： ```html <!-- 父组件.vue --> <template> <div> <child-component ref="myChild" @someEvent="callSomeMethod"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { callSomeMethod(event, data) { this.$refs.myChild.someMethod(data); } } } </script> ``` 在上述代码中，`@someEvent`是自定义事件，当子组件触发`someEvent`时，父组件会接收到事件并调用`someMethod`。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值