Vue通過refs屬性可以獲取到子組件或DOM元素，然后通過子元素的屬性獲取到需要的值。下面我們來看一個(gè)簡單的例子：

<template>
<div>
<input ref="input" type="text" v-model="inputValue">
<button @click="handleClick">獲取input的內(nèi)容</button>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleClick() {
const inputDom = this.$refs.input;
const value = inputDom.value;
console.log(value);
}
}
}
</script>

在這個(gè)例子中，我們通過ref屬性獲取到了input元素的DOM對象，并使用其value屬性獲取到輸入的內(nèi)容，然后將其打印出來。

但是請注意，使用refs獲取子元素或組件是有一定限制的，因?yàn)樗钱惒降?，這意味著你只能在子組件被創(chuàng)建后才能訪問它。如果你試圖在父組件的created鉤子函數(shù)中訪問子組件，你將得到一個(gè)undefined。如果你需要在父組件的created鉤子函數(shù)中訪問子組件，你可以使用Vue提供的$nextTick函數(shù)。

<template>
<div>
<child-component ref="child"></child-component>
<button @click="handleClick">獲取子組件的屬性</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleClick() {
this.$nextTick(() => {
const childComponent = this.$refs.child;
const childProperty = childComponent.childProperty;
console.log(childProperty);
})
}
}
}
</script>

在這個(gè)例子中，我們展示了在父組件中如何獲取子組件的屬性。與之前的例子不同的是，我們這里使用了子組件的自定義屬性childProperty，獲取該屬性需要通過子組件的實(shí)例才能訪問到。