老师,<el-form ref="ruleFormRefPhone">是干什么的?为什么要这样写,不是应该写rulsFormPhone吗?

老师,<el-form ref="ruleFormRefPhone">是干什么的?为什么要这样写,不是应该写rulsFormPhone吗?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,这里可以理解为是针对ref的一个巧妙运用,即:在元素行添加ref属性,并赋值为一个ref对象,当DOM渲染完毕后,会将这个DOM元素赋值给ref对象。

所以截图中的代码意思就是给el-form元素添加ref属性,并赋值为一个ref对象rulsFormRefPhone,当DOM渲染后,就会将el-form这个DOM元素赋值给rulsFormRefPhone,之后就可以通过rulsFormRefPhone操作dom元素了。

祝学习愉快~

  • 大卫9580776 提问者 #1

    可是我没有用到rulsFormRefPhone,我并没有用到它,为什么要写它,我用到了rulsFormPhone。看看我vue2的代码,老师。vue3是重购的。什么vue2的ref里面的值是phoneForm对象,而vue3不是账号密码的那个对象。而是一个ref(“”)

    https://img1.sycdn.imooc.com//climg/6375ebc5091f30d410500784.jpg

    https://img1.sycdn.imooc.com//climg/6375ebd7096c7b4706160576.jpg

    2022-11-17 16:13:13
  • 好帮手慕慕子 回复 提问者 大卫9580776 #2

    问题解答如下:

    1、不管是vue2还是vue3, ref属性的作用都是用来获取到当前dom元素的引用。如果你没有用到,完全可以不写。

    2、Vue2 中的写法,可以结合下图标注理解,最后可以通过this.$ref.xxx,获取到DOM元素

    https://img1.sycdn.imooc.com//climg/638566e509e94f4834341988.jpg

    Vue3中的写法,可以参考第一次回复理解,由于setup中this为undefined,无法通过this.$ref.xxx获取到DOM元素,所以这里利用了ref对象的特性,在DOM渲染后,将其赋值给该对象,这样在js中就可以通过ref对象获取到DOM

    https://img1.sycdn.imooc.com//climg/6375efea0915892812381338.jpg

    祝学习愉快~


    2022-11-17 16:29:42
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师