vue父组件调用子组件的方法

最新推荐文章于 2025-06-25 09:31:16 发布

原创最新推荐文章于 2025-06-25 09:31:16 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍在Vue中如何从父组件调用子组件的方法。通过在子组件上使用ref属性并结合this.$refs，父组件可以轻松调用子组件内的任何方法，实现组件间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件调用子组件的方法
在父组件页面中显示子组件的标签中添加属性ref=“namexxx”

在方法里面用 this.$refs.child.自组件方法名

下面看列子

父组件
    <div @click="showChild">点击</div>
    <div>
      <component :is='test' ref="child"></component>
    </div>


	showChild(){
	this.$refs.child.childMethods()//去调用子组件方法
	}


子组件
	childMethods(){
	console.log("被父组件调用的方法")
	}