vue中父组件获取子组件的方法

关键词:ref

在子组件child.vue中,有两个数据:

data() {
    return {
        a:1,
        b:2,
    }
}

在父组件father.vue中,使用子组件:

<child ref="child" .../>

<script>
...
let child_a = this.$refs.child.a
let child_b = this.$refs.child.b

重点是父组件的两个地方,先用 ref 属性标识子组件,然后用 this.$refs 获取子组件

Vue3中,组件可以通过使用`ref`或`$refs`来获取组件中的数据。 引用[1]中的代码示例展示了一个组件如何获取组件中的数据。首先,在组件的`<template>`标签中,使用`ref`属性给组件添加一个引用名称,例如`ref="xqmain"`。然后,在组件的`<script>`标签中,通过`this.$refs.xqmain`来访问组件的实例。在`created`生命周期钩函数中,可以使用`this.$nextTick`来确保组件已经被渲染完毕。通过`this.$refs.xqmain`可以访问组件的属性和方法,例如`this.$refs.xqmain.isBuys`。[1] 引用[2]中的代码示例展示了另一种组件获取组件数据的方法。在组件的`<template>`标签中,使用`ref`属性给组件添加一个引用名称,例如`ref="myRefs"`。然后,在组件的`<script setup>`标签中,通过`const myRefs = ref()`来获取绑定的`ref`。通过`myRefs.value`可以访问组件的属性和方法,例如`myRefs.value.change()`和`myRefs.value.age`。[2] 引用[3]中的代码示例展示了另一种组件获取组件数据的方法。在组件的`<template>`标签中,使用`ref`属性给组件添加一个引用名称,例如`ref="sonRef"`。然后,在组件的`<script>`标签中,通过`const sonRef = ref(null)`来获取绑定的`ref`。通过`sonRef.value`可以访问组件的属性和方法,例如`sonRef.value.xxx`。[3] 综上所述,组件可以通过`this.$refs`或`ref`来获取组件中的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

进击的桐人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值