Vue.js是一個流行的JavaScript前端框架。在Vue.js中，可以通過$refs引用DOM元素，實現(xiàn)組件和原始DOM之間的通信。下面我們來詳細了解一下$refs的使用方法。

首先，我們需要在Vue組件中定義一個ref屬性，以便對DOM元素進行引用。下面是一個示例：

<template>
<div>
<input type="text" ref="myInput">
<button @click="handleClick">Click</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log(this.$refs.myInput.value);
},
},
};
</script>

在上面的代碼中，我們通過ref來標識了一個input元素，并在handleClick方法中打印了它的值。

需要注意的是，$refs只有在組件渲染完成后才能訪問。如果試圖在組件渲染之前訪問$refs，將會得到undefined。

$refs不僅可以引用DOM元素，還可以引用Vue組件。下面是一個示例：

<template>
<div>
<child-component ref="myChild"></child-component>
<button @click="handleClick">Click</button>
</div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
components: {
ChildComponent,
},
methods: {
handleClick() {
this.$refs.myChild.sayHello();
},
},
};
</script>

在上面的代碼中，我們引用了一個child-component組件，并在handleClick方法中調(diào)用了它的sayHello方法。

總的來說，$refs是Vue.js中一個非常有用的特性，可以讓我們方便地訪問DOM元素和組件，并進行相應(yīng)的操作。