0
点赞
收藏
分享

微信扫一扫

[vue2.x]ref的使用

深夜瞎琢磨 2022-04-15 阅读 98
前端

动态赋值问题

this.$refs[name]直接使用有问题

this.$refs[`${this.name}`]或this.$refs[this.name]

千万注意动态赋值的时候,使用的值通过this获取

通过ref调用子组件的方法

使用场景

子组件中包含form表单 ,想要在父组件中使用form表单的验证方法

子组件
a.vue

<a-form-module>
<a-form-model-item></<a-form-model-item>
<a-form-model-item></<a-form-model-item>
<a-form-model-item></<a-form-model-item>
</a-form-module>

父组件

<add-form ref='add'></add-form>

网上大部分都是直接使用this. r e f s [ ′ a d d ′ ] , 但 是 不 是 提 示 u n d e f i n e d , 就 是 提 示 v a l i d a t e 不 是 t h i s . refs['add'],但是不是提示undefined,就是提示validate不是this. refs[add],undefinedvalidatethis.refs[‘add’]的方法
在这里插入图片描述

因此可以通过以下方式使用

this.$refs['add'].$children[0].validate(valid => {
       if (!valid) {
         return false;
       }
});
举报

相关推荐

0 条评论