如何用Vue.js $emit实现两个组件值同步？购物车场景求助

当然可以实现Main组件输入内容同步到Test World组件，对应到你的购物车场景，就是Buy组件触发添加操作后，Cart组件实时更新数量，无需手动调用组件触发$emit，以下是几种可行方案：

1. 父组件作为中间状态容器（适合简单场景） #

把共享状态（比如输入内容/购物车数量）放在父组件中，子组件通过props接收状态，触发更新时通过$emit通知父组件修改状态，父组件再将更新后的状态传给另一个子组件。

示例代码： #

• 父组件（如App.vue）：

<template>
  <Main :value="sharedValue" @update-value="updateSharedValue" />
  <TestWorld :value="sharedValue" />
</template>

<script>
export default {
  data() {
    return {
      sharedValue: '' // 购物车场景可改为number类型，初始值设为0
    }
  },
  methods: {
    updateSharedValue(newVal) {
      this.sharedValue = newVal
      // 购物车场景可改为：this.sharedValue++
    }
  }
}
</script>

• Main（Buy）组件：

<template>
  <input v-model="localValue" @input="handleInput" />
  <!-- 购物车场景替换为：<button @click="handleAdd">添加商品</button> -->
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      localValue: this.value
    }
  },
  methods: {
    handleInput() {
      this.$emit('update-value', this.localValue)
    },
    // 购物车场景对应方法：
    // handleAdd() {
    //   this.$emit('update-value')
    // }
  },
  watch: {
    value(newVal) {
      this.localValue = newVal
    }
  }
}
</script>

• TestWorld（Cart）组件：

<template>
  <div>{{ value }}</div>
  <!-- 购物车场景可改为：<div>购物车数量：{{ value }}</div> -->
</template>

<script>
export default {
  props: ['value']
}
</script>

2. 使用Pinia/Vuex做全局状态管理（适合复杂场景） #

如果项目组件层级多、状态共享频繁，全局状态管理会更省心，无需层层传递props和emit。

Pinia示例： #

首先定义store：

// stores/cart.js
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

• Buy组件：

<template>
  <button @click="addItem">添加商品</button>
</template>

<script setup>
import { useCartStore } from '@/stores/cart'
const cartStore = useCartStore()

const addItem = () => {
  cartStore.increment()
}
</script>

• Cart组件：

<template>
  <div>购物车数量：{{ cartStore.count }}</div>
</template>

<script setup>
import { useCartStore } from '@/stores/cart'
const cartStore = useCartStore()
</script>

3. 事件总线（Vue2可用，Vue3推荐用mitt库） #

Vue2可直接用new Vue()作为事件总线，Vue3可借助mitt库实现跨组件通信，适合简单场景，复杂场景仍推荐状态管理方案。

Vue3 mitt示例： #

先安装mitt：npm install mitt

创建事件总线：

// bus.js
import mitt from 'mitt'
export const bus = mitt()

• Buy组件：

<template>
  <button @click="addItem">添加商品</button>
</template>

<script setup>
import { bus } from '@/bus'
const addItem = () => {
  bus.emit('cart-increment')
}
</script>

• Cart组件：

<template>
  <div>购物车数量：{{ count }}</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { bus } from '@/bus'
const count = ref(0)

const handleIncrement = () => {
  count.value++
}

onMounted(() => {
  bus.on('cart-increment', handleIncrement)
})

onUnmounted(() => {
  bus.off('cart-increment', handleIncrement)
})
</script>

不管哪种方案，核心都是让状态的修改和同步有统一入口，只要在输入/点击添加这类交互动作触发时更新状态，依赖该状态的组件就会自动同步显示最新值。

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