[vue2.x]ref的使用

动态赋值问题

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.$refs{[}^{\prime }ad{d}^{\prime }],但是不是提示undefined，就是提示validate不是this.$refs[‘add’]的方法

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

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