组件化开发与通信-CSDN博客

本文链接：https://blog.csdn.net/weixin_64588463/article/details/147490230

在 Vue 3 中创建一个包含 A、B 和C三个组件的示例。A 组件表示转账人，B 组件表示收款人，A 组件作为父组件通过 props 将转账金额传递给 B 组件，B 组件作为子组件接收并显示该金额，并通过 emit 向 A 组件发送确认信息。C 组件作为观察者通过 provide 和 inject 获取 A 组件传递给 B 组件的转账金额。

1. 创建 `App.vue`

<template>
  <div id="app">
    <h1>Vue 3 组件通信示例</h1>
    <A />
  </div>
</template>

<script setup>
import A from './components/A.vue';
</script>

2. 创建 `A.vue`（父组件）

<template>
  <div class="component-a">
    <h2>A 组件 - 转账人</h2>
    <p>请输入转账金额：</p>
    <input v-model.number="amount" type="number" placeholder="输入金额" />
    <button @click="sendMoney">转账</button>
    <p v-if="confirmedMessage">{{ confirmedMessage }}</p>
    <hr />
    <B :amount="transferredAmount" @confirm="handleConfirm" />
    <C />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';
import B from './B.vue';
import C from './C.vue';

// 定义转账金额
const amount = ref(0);
const transferredAmount = ref(0);
const confirmedMessage = ref('');

// 提供转账金额给 C 组件
provide('transferredAmount', transferredAmount);

// 转账方法
const sendMoney = () => {
  if (amount.value > 0) {
    transferredAmount.value = amount.value;
    amount.value = 0; // 清空输入框
  } else {
    alert('请输入有效的金额');
  }
};

// 处理来自 B 组件的确认信息
const handleConfirm = (message) => {
  confirmedMessage.value = message;
};
</script>

<style scoped>
.component-a {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
</style>

3. 创建 `B.vue`（子组件）

<template>
  <div class="component-b">
    <h2>B 组件 - 收款人</h2>
    <p>收到转账金额：{{ amount }}</p>
    <button @click="confirmReceipt">确认收款</button>
  </div>
</template>

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

// 接收父组件传递的金额
const props = defineProps({
  amount: {
    type: Number,
    required: true,
  },
});

// 定义 emit 事件
const emit = defineEmits(['confirm']);

// 确认收款
const confirmReceipt = () => {
  emit('confirm', `已确认收到金额：${props.amount}`);
};
</script>

<style scoped>
.component-b {
  border: 1px solid #999;
  padding: 10px;
  margin-top: 20px;
}
</style>

4. 创建 `C.vue`（观察者组件）

<template>
  <div class="component-c">
    <h2>C 组件 - 观察者</h2>
    <p>观察到的转账金额：{{ observedAmount }}</p>
  </div>
</template>

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

// 注入从 A 组件提供的转账金额
const observedAmount = inject('transferredAmount', 0);
</script>

<style scoped>
.component-c {
  border: 1px solid #666;
  padding: 10px;
  margin-top: 20px;
}
</style>

功能说明

A 组件（父组件）：
- 包含一个输入框，用户可以输入转账金额。
- 点击“转账”按钮后，将金额传递给 B 组件，并通过 provide 将金额共享给 C 组件。
- 接收 B 组件发出的确认信息并显示。
B 组件（子组件）：
- 接收 A 组件传递的金额并通过 props 显示。
- 点击“确认收款”按钮后，通过 emit 向 A 组件发送确认信息。
C 组件（观察者）：
- 使用 inject 获取 A 组件通过 provide 共享的转账金额，并实时更新显示。