父組件向子組件傳值（通過 props）：

<!-- 父組件 -->
<template><ChildComponent :message="parentMessage" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
const parentMessage = '這是來自父組件的值';
</script><!-- 子組件 -->
<template><div>{{ message }}</div>
</template><script setup>
defineProps(['message']);
</script>

以下是幾個父組件向子組件傳值的示例：

示例 1：傳遞字符串

父組件：

<template><ChildComponent :message="messageFromParent" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
const messageFromParent = '這是來自父組件的消息';
</script>

子組件：

<template><div>{{ message }}</div>
</template><script setup>
defineProps(['message']);
</script>

示例 2：傳遞數(shù)字

父組件：

<template><ChildComponent :count="5" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
</script>

子組件：

<template><div>接收到的數(shù)字: {{ count }}</div>
</template><script setup>
defineProps(['count']);
</script>

示例 3：傳遞對象

父組件：

<template><ChildComponent :userInfo="{ name: '張三', age: 25 }" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
</script>

子組件：

<template><div>用戶信息: {{ userInfo.name }}, {{ userInfo.age }}</div>
</template><script setup>
defineProps(['userInfo']);
</script>

示例 4：傳遞數(shù)組

父組件：

<template><ChildComponent :fruits="['蘋果', '香蕉', '橙子']" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
</script>

子組件：

<template><div>水果列表: <ul><li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li></ul></div>
</template><script setup>
defineProps(['fruits']);
</script>

示例 5：傳遞布爾值

父組件：

<template><ChildComponent :isActive="true" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
</script>

子組件：

<template><div v-if="isActive">當前狀態(tài)為活躍</div><div v-else>當前狀態(tài)為不活躍</div>
</template><script setup>
defineProps(['isActive']);
</script>

子組件向父組件傳值（通過自定義事件）：

<!-- 父組件 -->
<template><ChildComponent @childEvent="handleChildEvent" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';function handleChildEvent(valueFromChild) {console.log('從子組件接收到的值：', valueFromChild);
}
</script><!-- 子組件 -->
<template><button @click="emitEvent">向父組件傳值</button>
</template><script setup>
defineEmits(['childEvent']);function emitEvent() {const valueToSend = '這是來自子組件的值';emit('childEvent', valueToSend);
}
</script>

子組件使用 v-model 向父組件傳值的示例代碼：

父組件：
html
復制

子組件：
html
復制

<input type=“text” :value=“value” @input=“$emit(‘update:value’, $event.target.value)” />

在上述示例中，父組件通過 v-model:value=“inputValue” 將 inputValue 與子組件進行綁定。子組件中的輸入框的值通過 :value=“value” 與父組件傳來的值進行關聯(lián)，當輸入框的值發(fā)生變化時，通過 @input=“$emit(‘update:value’, $event.target.value)” 觸發(fā) update:value 事件并將新的值傳遞給父組件，從而實現(xiàn)子組件向父組件傳值。

通過 provide 和 inject：

<!-- 父組件 -->
<template><ChildComponent />
</template><script setup>
import { provide } from 'vue';provide('sharedValue', '這是共享的值');
</script><!-- 子組件 -->
<template><div>{{ sharedValue }}</div>
</template><script setup>
import { inject } from 'vue';const sharedValue = inject('sharedValue');
</script>

使用 Vuex 狀態(tài)管理：
首先安裝 vuex ：npm install vuex@next --save
創(chuàng)建一個 store.js 文件：

import { createStore } from 'vuex';export default createStore({state: {commonValue: '這是全局的值',},mutations: {updateCommonValue(state, newValue) {state.commonValue = newValue;}},actions: {},getters: {}
});

在父組件和子組件中使用：

<!-- 父組件或子組件 -->
<template><div>{{ $store.state.commonValue }}</div>
</template><script setup>
import { useStore } from 'vuex';const store = useStore();function updateValue() {store.commit('updateCommonValue', '新的值');
}
</script>

這些是 Vue 3 中常見的組件間傳值方式，您可以根據(jù)具體的項目需求選擇合適的方法。