vue3 兄弟之间的传值

1. 通过父组件传值

父组件index.vue

<!-- 子组件传值给父组件 -->

<template>
    <div>
        <h1>父组件</h1>
        <ChildComponentA @message-sent="handleMessage"/>
        <ChildComponentB :message="receiveMessage" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponentA from './component/childComponentA.vue';
import ChildComponentB from './component/childComponentB.vue';

const receiveMessage = ref('');

const handleMessage = (message) => {
    receiveMessage.value = message;
}
</script>

<style scoped>
</style>

<!-- childComponentA.vue -->
<template>
    <div>
        <button @click="sendMessage">发送消息</button>
    </div>

</template>

<script setup>
import { defineEmits } from 'vue';
// 定义事件
const emit = defineEmits();

//方法触发事件
const sendMessage = () => {
    emit('message-sent', 'Hello from childComponentA!');
}


</script>

<style scoped>

</style>

<!-- childComponentB.vue -->

<template>
    <div>
        <p>接收到的信息: {{ message }}</p>
    </div>
</template>


<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    message: String,
    }
);


</script>

运行结果

当点击发送消息，下一行显示Hello from childComponentA！