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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值