vue中ref属性

62 阅读 0 评论 41 点赞

我是靠谱客的博主慈祥秀发，最近开发中收集的这篇文章主要介绍vue中ref属性，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

作用：

获取原生js中的的dom元素（标签元素）或者vue中的组件元素。

与原生js属性用法比较：

1）该属性对应原生javascript中的id和class属性

//通过class或id查找元素
doucument.getElementByClass("school")
document.getElementById("school");
//通过class或id查找标签元素
document.queryElement(".school")
cocument.queryElement("#school")

2）vue中的ref属性

<template>
  <div id="app">
    <button ref = "but">按钮</button>
    <School ref = "sch"/>
    <span ref = "hi">你好啊</span>
  </div>
</template>
<script>
//查找vue代码中的原生js标签或vue组件
this.$refs
</script>