vue中ref的用法解析

//html

<input type="text" ref="content">

//js

this.$refs.content.focus()

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

简单的说就是用 ref 在元素上注册, 用$refs去操作。

注:因为ref本身是作为渲染结果被创建的,在渲染初期的时候不能访问它,它还不存在!
所以可以

this.$nextTick(() => {      //先渲染dom后执行console
    this.$refs.content.focus()
}

此时就可以轻松地获取到它,并对他进行相应的dom操作了!

猜你喜欢

转载自blog.csdn.net/Shuanger112/article/details/81986122