JavaScript 和 jQuery 都是通过操作 DOM 节点元素去实现功能的, Vue 同样也有获取 DOM 节点的方法,那就是 ref 和 $refs,使用起来十分方便。
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。
通过 vm.$refs.name 即可获取标记的元素,其中 vm 为 vue 创建的实例,name为 ref 的属性名,通常为驼峰命名。
<div id="app">
<div>
<h2 ref="name1">这是name1节点元素</h2>
<p ref="name2">这是name2节点元素</p>
</div>
</div>
mounted() {
console.log(this); //vue实例对象
console.log(this.$refs.name1); //上面的h2标签元素
console.log(this.$refs.name1.textContent); //标签内容
console.log(this.$refs.name2); //上面的p标签元素
},
注意点:
①如果 ref 重名,后面的 ref 会覆盖掉前面的 ref 。②元素使用 v-for ,返回 DOM 节点数组。