Vue组件通信求助：CartButton同步更新NavigationBar与ViewCart

你的代码存在几个核心问题导致数据不同步：

• CartButton触发emit时把数组转成了字符串，父组件接收后赋值给cartItems，导致子组件拿到的是字符串而非数组，无法正确计算长度和遍历。
• NavigationBar未声明props，无法接收父组件传递的cartItems。
• 父组件模板结构错误，将Navbar和CartButton嵌套在ViewCart内部，不符合组件的预期使用方式。
• CartButton的addToCart函数未实现，无法添加商品到购物车。
• 监听数组变化时未开启深度监听，数组内部元素变化可能无法触发watch。

以下是修正后的完整代码：

修正后的NavigationBar组件 #

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

// 声明接收cartItems props
const props = defineProps({
  cartItems: {
    type: Array,
    required: true
  }
});

// 深度监听数组变化
watch(props.cartItems, (newValue) => {
  console.log('cart items updated');
  console.log(newValue);
}, { deep: true });

// 实现viewCart函数
const viewCart = () => {
  // 这里可以添加打开购物车侧边栏的逻辑
  console.log('open cart sidebar');
};
</script>

<template>
  <button @click="viewCart()">
    View Cart ({{ cartItems.length }})
  </button>
</template>

修正后的CartButton组件 #

<script setup>
import { reactive, watch } from 'vue';

const emit = defineEmits(["cart-items"]);
// 初始化购物车数据，直接用数组，不转字符串
const cartItems = reactive(JSON.parse(localStorage.getItem("cartItems")) || []);

// 实现addToCart函数，示例添加一个商品
const addToCart = () => {
  // 这里替换成实际的商品数据
  const newItem = { id: Date.now(), name: 'New Product', price: 99 };
  cartItems.push(newItem);
};

// 深度监听数组变化，直接传递数组而非字符串
watch(cartItems, (newValue) => {
  localStorage.setItem("cartItems", JSON.stringify(newValue));
  console.log('new value!', newValue);
  emit("cart-items", [...newValue]); // 传递数组副本避免引用问题
}, { deep: true });
</script>

<template>
  <button id="add-to-cart" @click.prevent="addToCart">
    Add to Cart
  </button>
</template>

修正后的ViewCart组件 #

<script setup>
const props = defineProps({
  cartItems: {
    type: Array,
    required: true
  }
});
</script>
<template>
  <div class="cart-sidebar">
    <h3>Cart Items</h3>
    <div v-for="item in cartItems" :key="item.id">
      {{ item.name }} - ${{ item.price }}
    </div>
    <div v-if="cartItems.length === 0">
      Your cart is empty
    </div>
  </div>
</template>

修正后的父组件 #

<script setup>
import { ref, watch } from 'vue';
import NavigationBar from './NavigationBar.vue';
import ViewCart from './ViewCart.vue';
import CartButton from './CartButton.vue';

// 初始化购物车数据，数组类型
let cartItems = ref(JSON.parse(localStorage.getItem("cartItems")) || []);

// 接收子组件的emit，直接赋值数组
function receiveEmit(newCartItems) {
  console.log('Received Emit!', newCartItems);
  cartItems.value = newCartItems;
}

// 监听父组件cartItems变化，同步到localStorage（可选，也可以只在子组件处理）
watch(cartItems, (newValue) => {
  localStorage.setItem("cartItems", JSON.stringify(newValue));
}, { deep: true });
</script>

<template>
  <!-- 平级渲染三个子组件，修正嵌套结构 -->
  <NavigationBar :cart-items="cartItems" />
  <CartButton @cart-items="receiveEmit" />
  <ViewCart :cartItems="cartItems" />
</template>

关键修复点说明 #

1. 数据格式统一：全程保持cartItems为数组类型，避免在emit时转成字符串，确保子组件能正确处理数据。
2. Props声明：给NavigationBar添加props定义，确保能接收父组件传递的cartItems。
3. 模板结构修正：将三个子组件平级渲染，符合组件的独立使用逻辑。
4. 深度监听：给watch添加{ deep: true }选项，确保数组内部元素变化时能触发监听。
5. 实现addToCart函数：补充添加商品的逻辑，确保能触发购物车数据变化。

内容的提问来源于stack exchange，提问作者AGirlisnoone