父组件调用子组件中的方法（vue2）

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

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

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

Vue全家桶专栏收录该内容

35 篇文章

订阅专栏

这篇博客介绍了在Vue中如何通过ref属性实现父组件对子组件的引用，进而调用子组件的方法。子组件包含一个可修改的`info`属性和一个用于重置信息的`cancelInfo`方法。父组件则通过`$refs`来调用子组件的`cancelInfo`方法，展示了Vue组件间通信的基本用法。

主要用到ref,父组件获取子组件的ref执行子组件内的方法

子组件

<template>
  <div>
    <p>{{info}}</p>
    <button @click="cancelInfo">Cancel</button>
  </div>
</template>
<script>
export default {
  name: 'InfoButon',
  data(){
    return{
      info: 'ModifyInfo'
    }
  },
  methods:{
    cancelInfo(){
      console.log('');
      this.info = 'Init-Info'
    }
  }
}
</script>

父组件

<template>
  <div>hello PageTech-{{title}}
  <button @click="getTitle">getTitle</button>
  <InfoButon ref="infoButtonRef" />
  </div>
</template>
<script>
import InfoButon from "./components/InfoButton/index.vue";
export default {
  name: 'PageTect',
  components:{
    InfoButon
  },
  data() {
    return {
      title: 'Title-title'
    }
  },
  // 
  mounted(){
    console.log('mounted');
  },
  methods:{
    getTitle(){
      console.log('title',this.title,this);
      // 调用子组件方法
      this.$refs.infoButtonRef.cancelInfo();
    }
  }
}
</script>