1.什么是ref 引用
ref用来辅助开发者在不依赖于jQuery 的情况下,获取DOM元素或组件的引用。
每个vue的组件实例上,都包含一个$refs
对象,里面存储着对应的DOM元素或组件的引用。默认情况下,组件的$refs指向一个空对象。
2.使用ref 引用DOM元素
如果想要使用ref引用页面上的DOM元素,则可以按照如下的方式进行操作:
3.使用ref 引用组件实例
如果想要使用ref 引用页面上的组件实例。则可以按照如下的方式进行操作:
4.控制文本框和按钮的按需切换
通过布尔值 inputvisible
来控制组件中的文本框与按钮的按需切换。示例代码如下:
5.让文本框自动获得焦点
当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加ref 引用,并调用原生DOM对象的.focus()方法即可。示例代码如下:
会报错,所以还需要以下6里面的方法
6.this.$nextTick(cb)方法
组件的 $nextTick(cb)方法。会把 cb回调推迟到下一个DOM更新周期之后执行。通俗的理解是∶等组件的DOM更新完成之后,再执行cb回调函数。从而能保证cb回调函数可以操作到最新的DOM元素。