Vue 作為一套構建用戶界面的漸進式框架，提供了豐富的 API 和工具，使得我們在開發 Web 應用時變得更加高效。其中一個常見需求是獲取子元素的數據。下面，我們將使用Vue 中的 ref 和 $refs 屬性來獲取 DOM 子元素的數據。

首先，在需要獲取子元素的組件或頁面中，我們需要使用 ref 屬性給子元素命名，例如：

<template>
<div>
<input ref="inputDom">
<button @click="getData">獲取數據</button>
</div>
</template>

上面的代碼中，我們給 input 元素添加了 ref 屬性，并命名為 “inputDom”。然后，我們在按鈕的點擊事件中調用 getData 方法來獲取 input 元素的數據。

接著，在組件或頁面的 methods 中，我們可以使用 $refs 屬性來獲取子元素的數據，例如：

<script>
export default {
methods: {
getData() {
console.log(this.$refs.inputDom.value)
// 打印出 input 元素的值
}
}
}
</script>

上面的代碼中，我們在 getData 方法中使用 this.$refs.inputDom.value 獲取到 input 元素的值，并將其打印到控制臺。

總結：
使用 Vue 中的 ref 和 $refs 屬性可以方便快捷地獲取 DOM 子元素的數據。通過使用 ref 屬性命名子元素，并在方法中使用 $refs 屬性來獲取數據，我們可以避免直接訪問 DOM，提高應用的可維護性和可復用性。