关于vue父组件引用子组件出现未定义问题

     1.首先导入子组件并且在components中定义子组件

     2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称

     3.调用子组件的方法 (getLoanApplyInfo()为子组件的方法)。

     

但是我在调用子组件的方法时 (this.$refs.pboc.getLoanApplyInfo()方法),出现了getLoanApplyInfo未定义的异常。

这个问题出现肯定是我没有得到子组件的实例,所以调用的时候出现了undefined异常。

我的子组件没有在页面初始化时加载,而是在点击某个特定的按钮后才开始显示加载

在这里做初始化后就立马执行了下一句调用子组件的方法,可能他还没有初始化完成,所以出现了undefined的异常,

所以在这里调用子组件方法时,我稍作了一下延时处理:

这样处理后没有undefined异常了,可以正常调用子组件方法了。

      我也是刚入门vue不久,很多东西也不是太懂,遇到了问题就随手记下来,有什么错误的地方,还请各位大佬指点一下。

                                                                                                                                       

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3 中,可以通过 `ref` 和 `setup` 来访问组件的实例和方法。具体步骤如下: 1. 在组件中,通过 `defineExpose` 暴露需要在组件中访问的方法。 例如,在组件中定义一个 `sayHello` 方法: ```typescript import { defineComponent } from 'vue' export default defineComponent({ setup() { const sayHello = () => { console.log('Hello from child component') } // 暴露 sayHello 方法 const exposed = { sayHello } // 返回暴露的接口 return { exposed } } }) ``` 2. 在组件中,通过 `ref` 获取组件实例,并在 `setup` 中访问组件暴露的接口。 例如,在组件中使用 `ChildComponent` 组件,并在 `setup` 中访问 `sayHello` 方法: ```typescript import { defineComponent, ref } from 'vue' import ChildComponent from './ChildComponent.vue' export default defineComponent({ components: { ChildComponent }, setup() { // 获取组件实例 const childComponentRef = ref<InstanceType<typeof ChildComponent>>() // 访问组件暴露的接口 const sayHello = () => { childComponentRef.value?.exposed.sayHello() } return { childComponentRef, sayHello } } }) ``` 在模板中,可以通过 `v-bind` 将 `childComponentRef` 绑定到组件的 `ref` 上,以便在 `setup` 中获取组件实例: ```html <template> <ChildComponent ref="childComponentRef" /> <button @click="sayHello">Say Hello</button> </template> ``` 需要注意的是,由于 `childComponentRef` 是一个响应式对象,因此需要使用 `.value` 访问其实际值。而在访问 `exposed` 属性时,需要使用可选链运算符 `?.`,以避免在组件还未挂载时访问未定义的属性。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值