在任何一個Web應用程序中，組件都是構成其基礎的一部分。組件是指一個獨立的功能塊，可以重復使用。Vue是一個可擴展的JavaScript庫，用于編寫大型單頁面應用程序。在Vue中，組件是非常重要的概念之一，因為組件可以幫助我們構建更清晰、可維護和可重用的代碼。而獲取組件值是在Vue應用程序中非常實用的功能之一。

在Vue組件中，獲取組件的值可以通過使用props或使用$refs屬性來實現。props是Vue提供的一種通過父組件向子組件傳遞數據的方式。子組件可以使用props來訪問在父組件中定義的數據。使用props可以實現父子組件之間的通信。

//子組件中使用props獲取值
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
props: ['message']
}
</script>
//父組件中使用props傳遞值
<template>
<div>
<custom-child message="Hello World!" />
</div>
</template>
<script>
import CustomChild from './components/CustomChild.vue'
export default {
components: { CustomChild }
}
</script>

在上面的示例代碼中，CustomChild組件使用了props來獲取父組件中message的值，而父組件中定義了CustomChild組件并傳遞了message的值。

另一種獲取Vue組件值的方法是使用$refs屬性。$refs屬性可以用來訪問在組件中定義的DOM元素或組件實例。使用$refs屬性可以方便地獲取特定組件的值或操作組件的方法。

<!-- 子組件 -->
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
}
}
</script>
<!-- 父組件 -->
<template>
<div>
<custom-child ref="child" />
<button @click="getMessage">獲取子組件的值</button>
</div>
</template>
<script>
import CustomChild from './components/CustomChild.vue'
export default {
components: { CustomChild },
methods: {
getMessage() {
const childComponent = this.$refs.child
console.log(childComponent.message)
}
}
}
</script>

在上面的示例代碼中，通過使用ref屬性標記CustomChild組件，然后在父組件中使用$refs.child來獲取子組件的值。

無論是使用props還是$refs屬性，都可以方便地獲取Vue組件的值。根據組件的具體需求，可以選擇使用props或$refs屬性，以滿足組件之間的通信需求或操作組件的特定行為。