Vue

【vue3】标签的ref属性

04-21 14:28

ref标签的作用

在 vue 中的标签上,允许使用 id 对 DOM 进行操作,但在多个组件中使用相同 id 时,易造成混淆,所以不推荐使用。

vue 为此提供了 ref 属性,用于注册模板引用,ref 属性可以解决 id 冲突的问题,Vue 的 ref 是组件级隔离的,只在当前组件生效,不同组件完全可以重名,互不干扰,且在普通标签、组件标签上都可以使用。

用在普通 DOM 标签上,获取的是 DOM 节点。

用在组件标签上,获取的是组件实例对象。


用在普通 DOM 标签上


用在组件标签上

ref 标签可以用在组件上,此时将拿到组件的实例对象,在 vue3 中,如果子组件没有对外共享数据,此实例对象没有意义(vue2 可直接使用子组件内的数据)

在子组件中通过 defineExpose 对外导出可共享的数据,父组件即可使用


微信小程序
大潇博客 版权所有 Copyright ©2016~2026
京ICP备17004217号-6  合作QQ:284710375
天玺科技