一個vue組件可以從父級組件或單獨的屬性中獲取屬性值。為了解決組件 API 聲明的問題，vue 提供了一些選項的語法來獲取屬性：props 和 $attrs。在這篇文章中，我們將討論這兩種方法，并提供一些使用它們的示例。
props是一種反應組件屬性數據的選項，我們可以通過該選項來將數據從父組件傳遞給子組件。當我們定義一個組件時，可以在組件聲明中使用屬性選項來定義需要從父級傳遞給組件的屬性。組件中定義的屬性名和父級中的屬性名相同，通過 v-bind 指令可以將父級組件的屬性綁定到子組件的屬性中。
// 在組件中定義屬性選項
Vue.component('my-component', {
props: ['msg'],
template: '{{ msg }}'
})
// 在父級組件中使用屬性在上面的示例中，我們在子組件中定義了一個名為 msg 的屬性，然后將該屬性綁定到父級組件中的 "Hello!" 字符串。在最終渲染中，子組件會顯示該字符串。
在vue中，還可以通過$attrs選項獲取組件的未定義屬性。這些屬性將傳遞給組件的根元素，并可以通過 $attrs 對象進行訪問。$attrs 選項不反應子組件中定義的任何屬性，只包含為組件傳遞的未知屬性。
Vue.component('my-component', {
template: '{{ $attrs }}'
})在上面的示例中，我們在組件中使用 $attrs 選項訪問未知屬性。當渲染完組件后，它會輸出未知屬性的對象，如下所示：
{
id: 'my-id',
title: 'My Title',
class: 'my-class'
}在組件中，我們也可以使用 $listeners 選項獲取組件注冊的事件。$listeners 選項的值是一個對象，其包含在組件上聲明的自定義事件。在這個對象中，每個事件的 key 是事件名稱(如 click)，而每個值是實際事件的處理器函數。
Vue.component('my-component', {
template: ''
})在上面的示例中，我們在組件中使用 $listeners 選項來處理父級傳遞的自定義 click 事件。當渲染為 HTML 后，我們會得到以下的標記：
通過這些方法，我們可以方便地獲取組件的屬性、未知屬性和自定義事件。這有助于我們更好地了解和控制 vue 組件的行為，以及優化我們應用程序的性能。