组件之间的信息传递的四种方法！！【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>