有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue ref 和 $refs 是什么意思?(用法讲解)

vue 炮渣日记 3周前 (11-09) 15次浏览 已收录 0个评论 扫描二维码
今天来聊聊关于refrefs是什么东东的知识,这两个东西是做前端应该都知道的知识点,其实也没有那么复杂难懂,只是在最开始的时候不知道是什么而已,当看了文档,然后配合代码就清楚知道他的含义了。

首先我们来看看官网的API解释

预期:string

预期就是指默认的一个类型吧。

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上。

解释:意思就是说它可以放到组件上面,这样后续你要用就可以通过一个变量直接使用。

<p ref=”p”>hello</p>

这段代码在p标签上面添加了一个ref=p,等于右边变量可以自己随便写,这样一个动作过后,后面就可以直接使用了。

需要注意的是:关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 – 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

访问子组件实例或子元素

有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用。例如:

<base-input ref="usernameInput"></base-input>

现在在你已经定义了这个 ref 的组件里,你可以使用:

this.$refs.usernameInput

上面就可以直接反问了,而且你可以通过父组件来反问:this.$refs.input.focus()

这样也是没有问题的。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址