vue3学习与实践:遇到给组件设置ref属性获取不到实例的问题

文章讲述了在Vue中,使用v-if/v-else-if/v-else控制组件显示与隐藏时,只有首次显示的组件实例会被返回。作者推荐使用v-show并配合nextTick函数,确保在DOM元素构建完成后获取所有组件实例。
摘要由CSDN通过智能技术生成

1.问题描述

        当几个组件需要根据状态值判断是否展示时,我们通常会用到v-if、v-else-if、v-else来设置展示与隐藏,同时我们需要获取这些组件的实例,会使用到ref属性来赋值,但最终只有首次为显示状态的组件才有实例返回、其余不管是隐藏还是后面根据状态值变更的显示始终拿不到实例(打印为null);

2.个人解决方式

        调整v-if、v-else-if、v-else属性,改为v-show来控制显隐都能获取到实例;

        v-if、v-else-if、v-else:false修饰的组件不会载入页面中,会被删掉;

        v-show:组件都会载入页面中,实际是控制其display属性显隐;

 更新2023-11-22(最佳处理方式):使用nextTick函数会在页面dom元素构建完成之后执行,这样实例就能拿到了。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中,通过ref无法直接获取组件实例对象。原因是Vue 3在设计上做了一些改变,引入了Composition API,使用ref来包装数据,而不再用于获取组件实例。 在Vue 2中,我们可以使用this.$refs来获取组件实例对象,但在Vue 3中,这种方法已被废弃。代替的做法是使用setup函数和提供的Composition API。 在组件的setup函数中,我们可以通过返回一个对象来将里面的属性和方法暴露给组件使用。如果希望获取组件实例对象,可以借助Vue 3提供的内置函数getCurrentInstance()。 getCurrentInstance()函数返回了一个"currentInstance"对象,该对象包含了组件实例的一些属性和方法。通过这个对象,我们可以获取组件实例,并进行相关操作。 举个例子,假设我们有一个名为"HelloWorld"的组件,我们希望在组件内部获取实例对象。可以按照以下步骤: 1. 在组件的setup函数中,使用getCurrentInstance()获取组件实例对象。 2. 将获取到的实例对象保存在一个变量中,例如"instance"。 3. 现在,我们可以通过"instance"来访问组件实例属性和方法。 下面是一个简单的示例代码: ```javascript import { getCurrentInstance, ref } from 'vue' export default { setup() { const instance = getCurrentInstance() // 使用ref包装组件内部的属性 const data = ref('Hello World') // 对组件实例进行操作 console.log(instance.props) // 访问组件的props console.log(instance.emit) // 调用组件的emit方法 // 返回需要暴露给组件的数据 return { data } } } ``` 通过这种方式,我们可以在Vue 3中获取组件实例对象,并进行相应的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值