Vue框架的ref是一項十分有用的功能。它允許你直接操作DOM元素，而不必通過復(fù)雜的選擇器或其他方式與DOM節(jié)點交互。

<template>
<div>
<input type="text" ref="input1">
<input type="text" ref="input2">
<button @click="clearInputs">Clear</button>
</div>
</template>
<script>
export default {
methods: {
clearInputs() {
this.$refs.input1.value = '';
this.$refs.input2.value = '';
}
}
}
</script>

在上面的示例中，我們?yōu)閮蓚€輸入框添加了ref屬性。在Vue實例中，$refs將包含對這些輸入框的引用。在clearInputs方法中，我們使用這些引用來清除輸入框中的文本。

我們還可以使用ref來訪問子組件中的屬性和方法。在下面的示例中，我們使用ref來訪問子組件中的方法。

<template>
<div>
<child-component ref="child"></child-component>
<button @click="doSomething">Do something</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent';
export default {
components: {
ChildComponent
},
methods: {
doSomething() {
this.$refs.child.someMethod();
}
}
}
</script>

在上面的示例中，我們使用import語句導(dǎo)入子組件，并在Vue實例中將其作為組件注冊。使用ref屬性，我們將子組件的引用保存到$refs中。然后，我們在doSomething方法中使用這個引用來調(diào)用子組件中的方法。

總之，Vue框架的ref功能使得在Vue應(yīng)用中操作DOM和組件變得十分簡單。我們可以在Vue實例中使用$refs屬性來訪問DOM元素和子組件中的方法和屬性，從而使我們的代碼更加簡潔和易于維護(hù)。