组件之间的信息传递的四种方法！！【vue3 前端】

迎万难 赢万难！

1. 使用 defineProps 传递数据：

父组件通过 props 将数据传递给子组件，子组件使用 defineProps 接收这些数据。

父组件：

<!-- ParentComponent.vue -->
<template><div><ChildComponent :message="parentMessage" /></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';const parentMessage = 'Hello from Parent!';
</script>

子组件：

<!-- ChildComponent.vue -->
<template><div>{{ message }}</div>
</template><script setup>
const props = defineProps(['message']);
</script>

2. 使用。defineEmits 发送事件：

子组件可以通过 defineEmits 定义要发送的事件，父组件通过 v-on 或 @ 监听这些事件。

父组件：

<!-- ParentComponent.vue -->
<template><div><ChildComponent @childEvent="handleChildEvent" /></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';const handleChildEvent = (payload) => {console.log('Received from child:', payload);
};
</script>

子组件：

<!-- ChildComponent.vue -->
<template><button @click="sendToParent">Send to Parent</button>
</template><script setup>
const emit = defineEmits(['childEvent']);const sendToParent = () => {emit('childEvent', 'Hello from Child!');
};
</script>

3. 使用 Provide / Inject：

使用 provide 和 inject 也可以在祖先组件与后代组件之间传递数据。

祖辈组件：

<!-- GrandparentComponent.vue -->
<template><div><ParentComponent /></div>
</template><script setup>
import ParentComponent from './ParentComponent.vue';const sharedData = 'Hello from Grandparent!';
provide('sharedData', sharedData);
</script>

父组件：

<!-- ParentComponent.vue -->
<template><div><ChildComponent /></div>
</template><script setup>
import ChildComponent from './ChildComponent.vue';
</script>

子组件：

<!-- ChildComponent.vue -->
<template><div>{{ sharedData }}</div>
</template><script setup>
const sharedData = inject('sharedData');
</script>

4. 使用状态管理（如 Pinia）：

使用状态管理库（如 Pinia）可以在多个组件之间共享状态。 所有组件之间都可以共享，下面的例子是父子组件。

# 安装 Pinia
npm install pinia

store.js：

<!-- store.js -->
import { defineStore } from 'pinia';export const useStore = defineStore('main', {state: () => ({message: 'Hello from Store!',}),actions: {updateMessage(newMessage) {this.message = newMessage;},},
});

父组件：

<!-- ParentComponent.vue -->
<template><div><ChildComponent /><button @click="updateMessage">Update Message</button></div>
</template><script setup>
import { useStore } from './store';
import ChildComponent from './ChildComponent.vue';const store = useStore();const updateMessage = () => {store.updateMessage('New message from Parent!');
};
</script>

子组件：

<!-- ChildComponent.vue -->
<template><div>{{ store.message }}</div>
</template><script setup>
import { useStore } from './store';const store = useStore();
</script>