父组件触发子组件方法

 时间:2026-02-12 11:19:03

1、明确知识点:子组件上定义ref="refName",  父组件的方法中用 this.$refs.refName.method 去调用子组件方法。

父组件触发子组件方法

2、步骤:

父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件;那么就需要先找到子组件对象 ,即  this.$refs.refName.然后再进行调用,也就是 this.$refs.refName.method

父组件触发子组件方法

3、子组件编写方法:

<template>  

<div>    子组件   </div> 

</template> 

 <script>  

export default {    

 name: "child",   

//方法

 methods: {     

 childClick(event) {       

 console.log(event)

      }    }  }

</script>

父组件触发子组件方法

4、父组件中:

<template> 

  <div>  

  <button @click="parentClick">点击</button>   

 <Child ref="mychild" />   //使用组件标签  

</div> 

</template>

<script> 

  import Child from './child';   //引入子组件Child  

export default { 

  name: "parent",    

components: {     

 Child    // 引入子组件 child

},    

methods: {      

parentClick() {       

 this.$refs.mychild.childClick("我是子组件的方法");  // 调用子组件的方法childClick    

  }    }  } 

</script>

父组件触发子组件方法

5、父子组件编写完成,点击父组件中的按钮即可调用成功

父组件触发子组件方法

  • HDMI/VGA转接线连接苹果Mac显示器没图像?
  • Mac版微信文件传输助手文件保存的位置在哪里
  • 小品出行如何联系在线客服
  • 适合苹果电脑的游戏
  • 走应急车道怎么处罚
  • 热门搜索
    软炸鲜蘑的做法 猪肉的做法大全 鱼肉丸子的做法 霁怎么读 烫面蒸饺的做法 水煎包的做法 土豆块的做法大全 炒面条的家常做法 例如用英语怎么说 手机怎么恢复出厂设置