15.父组件主动获取子组件的数据和方法子组件主动获取父组件的数据和方法

本文介绍Vue.js中如何实现父子组件间的通信，包括父组件通过ref获取子组件数据和方法，以及子组件直接调用父组件的方法获取数据。

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

一、父组件主动获取子组件的数据和方法
父组件主动获取子组件的数据和方法，需要在调用的时候给子组件添加ref属性，通过ref属性获取子组件的属性和方法；

    1.调用子组件的时候顶一个ref
  * <v-body ref='body'></v-body>
  * 2.在父组件里调用
  * this.$ref.body.属性
  * this.$ref.body.方法

二、子组件主动获取父组件的数据和方法
子组件获取父组件的数据和方法可以直接调用this.$parent.方法名或者属性名`

this.$parent.msg1`

完整例子

home.vue
<template>
    <div>
        这是home组件
        <v-body ref='body'></v-body>
        <button @click="getchilddata()">获取子组件方法</button>
    </div>
</template>
<script>
import Body from './Body.vue'
export default {
    data(){
        return{
     msg1:'home组件的msg'

        }
    },components:{
        'v-body':Body
    },methods:{
        getchilddata(){
            //获取子组件的方法
            this.$refs.body.run();
            //获取子组件的属性
            alert(this.$refs.body.msg);
        }
    }
}
</script>
<style lang="scss">

</style>

Body.vue
<template>
    <div>
        这是body组件
        <button @click="getparent()">获取父组件的属性</button>
    </div>
</template>
<script>

export default {
   
    data(){
        return{
            msg:'这是子组件body的msg'
            
        }
    },methods:{
        run(){
            alert("这是子组件body的run方法")
        },
        getparent(){
           alert(this.$parent.msg1) 
        }
    }

}
</script>
<style lang="scss">

</style>