父組件向子組件傳值（通過(guò) props）：

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

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

示例 1：傳遞字符串

父組件：

<template><ChildComponent :message="messageFromParent" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';
const messageFromParent = '這是來(lái)自父組件的消息';
</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：傳遞對(duì)象

父組件：

<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="['蘋(píng)果', '香蕉', '橙子']" />
</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">當(dāng)前狀態(tài)為活躍</div><div v-else>當(dāng)前狀態(tài)為不活躍</div>
</template><script setup>
defineProps(['isActive']);
</script>

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

<!-- 父組件 -->
<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 = '這是來(lái)自子組件的值';emit('childEvent', valueToSend);
}
</script>

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

父組件：
html
復(fù)制

子組件：
html
復(fù)制

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

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

通過(guò) 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)建一個(gè) 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 中常見(jiàn)的組件間傳值方式，您可以根據(jù)具體的項(xiàng)目需求選擇合適的方法。