33vue学习——使用 ref 获取 DOM 元素和组件的引用
前言
在使用原生的 js 的时候,我们要获取一个 DOM 元素是一个十分简单的事情,只要给他加上一个 id 的属性值,我们就可以通过 getElementById 的方法直接获取,但是这就操作了 DOM 元素了,这是 vue 所不提倡的。那 vue 有给我们提供其他的方法呢? ref 就是 vue 提供给我们获取 DOM 元素的,让我们一起来学习吧。
步骤:
(1)给要获取的 DOM 元素添加 ref 属性,并设置该属性的值:
(2)通过 this.$refs.myh3 获取到 h3:
注意:
(1)我们在 元素上设置属性的时候是 ref
(2)我们在使用 this 获取的时候是 $refs
通过 ref 属性不但可以获取 DOM 元素,还可以作用在组件身上,让父组件可以通过 this.$refs 来获取子组件的 data 上的数据和 methods 里的方法
使用 ref 实现组件的引用的步骤:
(1)创建组件:
(2)在页面上引用:
(3)定义 ref 属性:
(4)通过 this.$refs 来调用子组件的方法: