Vue3：不同组件间变量传递与修改（避免重复引入组件）

你完全不需要把AllItems组件嵌套进Header里，这样既会导致组件重复渲染，也不符合组件的层级逻辑。下面给你几个实用的解决办法：

方案一：父组件作为中间通信层（最直接，无额外依赖） #

把Header和AllItems都放在父组件（比如App.vue）中，让父组件充当两者的通信桥梁：

1. 父组件（App.vue）代码：

<template>
  <div id="app">
    <!-- Header组件接收count值 -->
    <Header :count="cartCount" />
    <!-- AllItems组件触发addToCart事件，父组件监听 -->
    <AllItems @add-to-cart="handleAddToCart" />
  </div>
</template>

<script>
import Header from './components/Header.vue'
import AllItems from './views/AllItems.vue'

export default {
  components: { Header, AllItems },
  data() {
    return {
      cartCount: 0
    }
  },
  methods: {
    handleAddToCart() {
      this.cartCount += 1
    }
  }
}
</script>

2. AllItems组件修改：
   点击按钮时触发add-to-cart事件即可，不用管count的逻辑：

<template>
  <div class="btn me-md-2" @click="addTo(id)">Add to cart</div>
</template>

<script>
export default {
  methods: {
    addTo(id) {
      this.$emit('add-to-cart')
      this.cart.push(this.filteredItems[id])
    }
  }
}
</script>

3. Header组件修改：
   直接接收父组件传递的count值显示：

<template>
  <p>{{ count }}</p>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

方案二：用全局状态管理（适合复杂项目） #

如果你的项目有多个组件需要共享购物车状态，用Vuex（Vue2）或Pinia（Vue3）更合适，把count放到全局状态里，组件直接读写状态：

Vue2 + Vuex示例： #

1. 创建store/index.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cartCount: 0
  },
  mutations: {
    INCREMENT_CART_COUNT(state) {
      state.cartCount += 1
    }
  }
})

2. AllItems组件里提交mutation：

addTo(id) {
  this.$store.commit('INCREMENT_CART_COUNT')
  this.cart.push(this.filteredItems[id])
}

3. Header组件里读取状态：

<template>
  <p>{{ $store.state.cartCount }}</p>
</template>

或者用mapState辅助函数简化：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['cartCount'])
  }
}

方案三：事件总线（适合小型项目快速实现） #

创建一个全局事件总线，让AllItems触发事件，Header监听事件更新count：

1. 在main.js里注册事件总线：

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$bus = new Vue()

new Vue({
  render: h => h(App)
}).$mount('#app')

2. AllItems组件触发事件：

addTo(id) {
  this.$bus.$emit('add-to-cart')
  this.cart.push(this.filteredItems[id])
}

3. Header组件监听事件：

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.$bus.$on('add-to-cart', () => {
      this.count += 1
    })
  },
  beforeUnmount() {
    // 记得销毁监听，避免内存泄漏
    this.$bus.$off('add-to-cart')
  }
}
</script>

内容的提问来源于stack exchange，提问作者Евгений Худак