Vue中的ref是一個(gè)非常方便且實(shí)用的特性，它可以用來獲取頁面上的DOM元素、組件實(shí)例等等。在Vue中使用ref非常簡單，只需要在需要獲取引用的元素上添加ref屬性即可。 在Vue中獲取ref可以使用this.$refs來訪問，this代表的是Vue實(shí)例，而$refs是Vue實(shí)例所有ref屬性的集合，它是一個(gè)普通的JavaScript對象。通過$refs我們可以獲取到DOM元素的屬性、方法等等，甚至直接調(diào)用組件中定義的方法。 使用ref的一個(gè)常見的場景是獲取表單輸入框中的值。比如我們需要獲取一個(gè)輸入框的值并在頁面上進(jìn)行操作，那么就可以在該輸入框上添加ref屬性，然后使用$refs來訪問它。假設(shè)我們有以下代碼：

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

那么我們就可以在Vue中這樣來訪問它：

let value = this.$refs.inputValue.value;

這樣我們就可以獲取到輸入框中的值了。如果我們需要對獲取到的值進(jìn)行一些操作，比如復(fù)制到剪貼板中，可以直接調(diào)用DOM元素上的方法，比如select()、copy()等等。 除了獲取DOM元素的屬性和方法，ref還可以獲取組件實(shí)例。比如我們有一個(gè)組件：

<template>
<div>
<span>{{ message }}</span>
</div>
</template>
<script>
export default {
...
data() {
return {
message: 'Hello, Vue!'
}
},
...
}
</script>

如果我們需要在另一個(gè)組件中調(diào)用上述組件中的方法或者修改其中的數(shù)據(jù)，那么可以在上述組件上添加ref，然后在父組件中使用this.$refs來訪問該組件實(shí)例：

<template>
<div>
<my-component ref="myComponentRef"></my-component>
</div>
</template>
<script>
export default {
mounted() {
let myComponent = this.$refs.myComponentRef;
myComponent.message = 'Hi, Vue!';
}
}
</script>

通過ref我們可以非常方便地獲取DOM元素、組件實(shí)例等等，并對它們進(jìn)行操作。在實(shí)際開發(fā)中，ref是一個(gè)非常實(shí)用的特性，可以大大提高開發(fā)效率。