因为v-if导致ref失效设置this.$nextTick()也无效。

最新推荐文章于 2023-12-20 15:31:46 发布

可爱小仙子

最新推荐文章于 2023-12-20 15:31:46 发布

阅读量2k

点赞数 2

分类专栏： vue 文章标签：前端 vue.js html

本文链接：https://blog.csdn.net/qq_42661587/article/details/126037617

版权

vue 专栏收录该内容

40 篇文章 4 订阅

订阅专栏


          <template v-if="tabsValue === '3'">
            <refund-records
              :row="row"
              ref="refundChild"
            />
          </template>

在组件外设置v-if，怎么写ref都是undefined。使用了this.$nextTick()也无效果。

写法一、

<refund-records
     :row="row"
     ref="refundChild"
     v-show="tabsValue === '3'"
/>

写法二、

 <div v-show="tabsValue === '3'">
            <refund-records
              :row="row"
              ref="refundChild"
              v-if="tabsValue === '3'"
            />
 </div>

后来把v-if直接改为v-show就没有问题。但是由于我这必须要给这个子组件使用v-if指令，所以在组件外又用了div标签使用v-show指令，组件上依旧使用v-if。这样写之后就没有问题了。