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

最新推荐文章于 2025-09-18 13:32:25 发布

原创最新推荐文章于 2025-09-18 13:32:25 发布 · 743 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍在Vue中如何利用$ref特性获取子组件实例，从而实现在父组件中调用子组件的方法。通过具体示例，展示了定义子组件方法并在父组件中触发它的过程。

在vue我们可以用$ref获取子组件的实例和获取DOM

所以我们想要在父组件调用子组件方法就可以通过$ref去获取然后调用就好了

例：
子组件：

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

<script>
  export default {
    created(){
    }
    methods:{
      fetchData (interval=30) {
        console.log(interval)
      }
    },

  }
</script>

父组件：

<template>
  <div @click="reloadChlid">
    <<income-echart ref="child"></income-echart>
  </div>
</template>

<script>
  import incomeEchart from "./common/incomeEchart";
  export default {
     data(){
      return {
        interval: 7
      }
    },
    components: {      
      incomeEchart 
    },
    methods:{
      reloadChlid() {
        this.$refs.child.childMethod(this.interval); 
      }
    }
  }
</script>