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

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

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

80 ·

CC 4.0 BY-SA版权

文章标签：

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

vue 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何在Vue中利用$ref获取子组件实例并调用其方法，包括父组件如何通过$refs访问子组件实例，以及如何实现兄弟组件间的交互，如数据传递和方法调用。

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

我们都知道通过$ref可以获取到某个DOM，但是它也可以用来获取子组件的实例，调用子组件的方法

例：
子组件：

<template>
  <div></div>
</template>

<script>
  export default {
    methods:{
      childMethod(flag) {
        console.log(flag)
      }
    },
    created(){
    }
  }
</script>

父组件：在子组件中加上ref即可通过this.$refs.ref.method调用

<template>
  <div @click="parentMethod">
    <children ref="child1"></children>
  </div>
</template>

<script>
  import children from 'components/children/children.vue'
  export default {
     data(){
      return {
        flag: true
      }
    },
    components: {      
      'children': children
    },
    methods:{
      parentMethod() {
        console.log(this.$refs.child1) //返回的是一个vue对象，所以可以直接调用其方法
        this.$refs.child1.childMethod(this.flag); 
      }
    }
  }
</script>

例子，兄弟组件间传递DOM数据，调用函数

写一个兄弟组件之间传递数据，父组件调用方法的案例：
第一个子组件cartcont，发射数据

this.$emit('cartadd', event.target);

父组件接收数据，并将数据，通过调用另一个子组件shopcart 的方法传递给另一个子组件shopcart

<v-cartcont :food="food" @cartadd='_drop'></v-cartcont>
<v-shopcart ref='shopcart'></v-shopcart>

_drop(target){
    console.log('父组件接收数据')
    this.$refs.shopcart.drop(target);
}

shopcart子组件的方法

drop(el){
    console.log('调用另一个子组件的方法')
    console.log(el)
}