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

最新推荐文章于 2024-09-29 23:07:20 发布

zhaohanqq

最新推荐文章于 2024-09-29 23:07:20 发布

阅读量433

点赞数

分类专栏： vue 文章标签：父组件调用子组件方法 vue ref $refs

本文链接：https://blog.csdn.net/zhaohanqq/article/details/84937410

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一般情况，我们从父组件向子组件传递数据会用props，子组件事件想在父组件中执行可以用$emit。

现在父组件想用子组件里的一个方法，那怎么办？在父组件里首先得得到子组件对象，点的方式就可以使用子组件方法了，那如何得到子组件对象，必须用ref，简单例子如下：

<-- 子组件Food -->
methods: {
      toggleFood () {
	   this.showFood = ! this.showFood; 
      }
}

<-- 父组件Goods -->
<template>
      .....
      <Food ref='food'/>
</template>

<script>
      export default {
           methods: {
                showFood () {
                    this.$refs.food.toggleFood  // 调用子组件里的toggleFood方法 
                }
           }
      }
</script>