1. 父組件向子組件傳遞數據的步驟

1. 在子組件中定義?props：

   子組件通過?props?選項聲明它期望接收的數據。props?可以是數組形式（簡單聲明）或對象形式（支持類型檢查和默認值）。

2. 在父組件中使用子組件時綁定?props：

   父組件通過?v-bind（或簡寫為?:）將數據傳遞給子組件的?props。

3. 子組件使用接收到的數據：

   子組件可以直接在模板或邏輯中使用?props?中的數據。

2. 示例代碼

子組件 (ChildComponent.vue)

<template><div><h3>子組件</h3><p>接收到的消息：{{ message }}</p><p>接收到的數字：{{ number }}</p></div>
</template><script>
export default {// 定義 propsprops: {// 接收一個字符串類型的 messagemessage: {type: String,required: true, // 必傳},// 接收一個數字類型的 number，默認值為 0number: {type: Number,default: 0, // 默認值},},
};
</script><style scoped>
div {border: 1px solid #ccc;padding: 10px;margin: 10px;
}
</style>

父組件 (ParentComponent.vue)

<template><div><h2>父組件</h2><input v-model="parentMessage" placeholder="輸入消息" /><input v-model.number="parentNumber" placeholder="輸入數字" /><button @click="sendData">傳遞數據</button><!-- 使用子組件并綁定 props --><ChildComponent :message="parentMessage" :number="parentNumber" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent, // 注冊子組件},data() {return {parentMessage: 'Hello from Parent', // 父組件的數據parentNumber: 42, // 父組件的數據};},methods: {sendData() {alert('數據已傳遞給子組件');},},
};
</script><style scoped>
div {padding: 10px;border: 1px solid #000;
}
</style>

3. 代碼解析

子組件 (ChildComponent.vue)

1. props?定義：

   • message：接收一個字符串類型的數據，且是必傳的（required: true）。

   • number：接收一個數字類型的數據，默認值為?0。

2. 模板中使用?props：

   通過?{{ message }}?和?{{ number }}?顯示父組件傳遞過來的數據。

父組件 (ParentComponent.vue)

1. 數據定義：

   parentMessage?和?parentNumber?是父組件的數據，通過?v-model?綁定到輸入框。

2. 傳遞數據給子組件：

   使用?v-bind（簡寫為?:）將父組件的數據綁定到子組件的?props：

<ChildComponent :message="parentMessage" :number="parentNumber" />

1. 動態更新數據：

   當用戶在輸入框中修改數據時，parentMessage?和?parentNumber?會自動更新，并通過?props?傳遞給子組件。

4. 運行效果

1. 父組件顯示兩個輸入框和一個按鈕。

2. 用戶在輸入框中輸入內容，點擊按鈕后，數據會傳遞給子組件。

3. 子組件實時顯示父組件傳遞過來的數據。

5. 注意事項

1. props?是單向數據流：

   • 父組件向子組件傳遞數據是單向的，子組件不能直接修改?props?的值。

   • 如果子組件需要修改數據，可以通過?$emit?觸發事件，通知父組件修改。

2. props?驗證：

   可以通過?type、required、default?等選項對?props?進行驗證，確保數據的正確性。

3. 動態?props：

   使用?v-bind?動態綁定?props，可以實現父組件數據變化時，子組件自動更新。