Vue.js 在開發中被廣泛使用，因為它的易用性和靈活性。其中一個強大的功能是組件 props - 允許組件接收來自父組件的數據。在 Vue 3 中，我們加入了新的 Vue props 方式，它使得 props 的使用變得更加簡單和直接。

在 Vue 2 中，組件 props 被定義為帶有一個對象參數的函數。該對象列出了組件需要從父組件接收的屬性。例如，在下面這個組件中，我們定義了一個 props 對象，可以接收一個名為 “message” 的字符串：

Vue.component('my-component', {
props: {
message: {
type: String,
required: true
}
},
template: '
{{ message }}
'
})

在模板中，我們可以使用 props 對象中定義的 message 屬性：

但是，在 Vue 2 中，我們需要額外的代碼來驗證和處理 props，特別是對于類型和必需屬性進行驗證。Vue 3 引入了一種新的 props 方法，使這個過程更加簡單。

使用 Vue 3 中的新 props 方法，我們可以在組件中直接聲明 props，然后使用它們，就像在 data 或 methods 中聲明變量一樣。這種方法會自動處理 props 的驗證和類型檢查。例如：

Vue.component('my-component', {
props: {
message: String
},
template: '
{{ message }}
'
})

在這個組件中，我們沒有指定要求 message 屬性是必需的，因為我們使用了一個簡單的字符串類型聲明。如果父組件沒有傳遞 message 屬性，則其在組件中的值為 null。

可以僅使用 props 所提供的值，如下例所示：

Vue.component('my-component', {
props: {
message: String
},
template: '
{{ message.toUpperCase() }}
'
})

Vue 3 中的新 props 方法將使我們的代碼更加簡單和直接，避免了重復的驗證和處理代碼。當我們在構建復雜的 Vue 應用程序時，這個功能會減少我們的工作量，并使代碼更加可讀。