Vue3中ref的使用

Posted 2023-03-19

参考技术A 使用ElForm进行表单的验证时，之前在vue2中，则是采用的是this.$refs['form'].validate,但是在vue3 的setup中是没有办法直接使用this，如何进行解决？

需要注意的是，ref前面是没有:,而ref是一个变量的，这个是有些反直觉的。

需要注意的是 getCurrentInstance是有使用的限制的，如果是直接在方法中书写是直接拿不到值的,比如下面这种写法，直接放在了save方法中，是不行的

在vue3的setup中可以使用ref变量的方式或者getCurrentInstance两种方式来使用Ref，从使用方便的程度上来看，更加推荐使用ref变量的方式。

vue父组件中使用ref调用子组件中的方法

参考技术A 标签（空格分隔）： vue

绑定 ref="kmediaMonitor"
然后，js中直接调用就可以了

当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。
$ref 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”————你应该避免在模板或计算属性中访问 $ref

绑定 ref="kmediaMonitor"

js中