Vue3子组件事件正确传递方法及无父组件/Vuex的传递方案

1. Vue3中子组件正确传递事件的方法 #

Vue3里子组件传递事件的核心逻辑还是通过触发自定义事件通知父组件，但要遵循Vue3的API规范，你提供的代码混合了Vue2和Vue3的写法，先修正为正确实现：

父组件（选项式API写法） #

<template>
  <p>{{ count }}</p>
  <allItems @addToCart="countCart" />
</template>

<script>
import allItems from '@/views/allItems.vue';

export default {
  components: { allItems },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    countCart(value) {
      // 可接收子组件传递的参数
      this.count += 1
    }
  }
}
</script>

父组件（组合式API <script setup> 写法） #

<template>
  <p>{{ count }}</p>
  <allItems @addToCart="countCart" />
</template>

<script setup>
import { ref } from 'vue'
import allItems from '@/views/allItems.vue';

const count = ref(0)

const countCart = (value) => {
  count.value += 1
}
</script>

子组件（选项式API写法） #

<template>
  <div class="btn me-md-2" id="btn" @click="addTo(1)">点击加购</div>
</template>

<script>
export default {
  methods: {
    addTo(value) {
      // 触发自定义事件，可携带参数
      this.$emit('addToCart', value)
    }
  }
}
</script>

子组件（组合式API <script setup> 写法） #

<template>
  <div class="btn me-md-2" id="btn" @click="addTo(1)">点击加购</div>
</template>

<script setup>
// 组合式API需先导入defineEmits定义事件
const emit = defineEmits(['addToCart'])

const addTo = (value) => {
  emit('addToCart', value)
}
</script>

关键要点：

• 选项式API用this.$emit触发事件，组合式<script setup>用defineEmits声明后触发
• 父组件通过@事件名绑定处理函数，可接收子组件传递的参数
• 避免Vue2和Vue3 API混合使用（比如不要同时用ref和data选项定义响应式变量）

2. 不传递事件给父组件、不重复代码、不用Vuex的实现方案 #

可以用Vue原生的Provide/Inject实现跨组件状态共享，无需依赖第三方库，也不用层层传递事件：

步骤1：在顶层组件（如App.vue）提供状态和修改方法 #

<script setup>
import { ref, provide } from 'vue'

const cartCount = ref(0)

// 提供共享的状态和修改方法
provide('cart', {
  count: cartCount,
  addToCart: (value) => {
    cartCount.value += value || 1
  }
})
</script>

步骤2：子组件注入并调用修改方法 #

<template>
  <div class="btn me-md-2" id="btn" @click="addTo(1)">点击加购</div>
</template>

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

const cart = inject('cart')

const addTo = (value) => {
  cart.addToCart(value)
}
</script>

步骤3：展示计数的组件（如Header）注入状态 #

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

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

const cart = inject('cart')
</script>

这种方案的优势：

• 状态和修改逻辑统一维护，避免代码重复
• 无需通过父组件中转事件和状态
• 基于Vue原生API，无需引入额外状态管理库

另外也可以用全局事件总线（比如借助mitt库），但Provide/Inject更适合这种需要共享状态的场景，事件总线则更适合无关联组件间的消息传递。

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