Vue3子组件emit传参至父组件返回undefined的解决办法

你的代码里有几处关键问题导致父组件接收不到子组件传递的值，下面逐一说明并给出修正后的代码：

子组件的问题 #

1. setup中不能用this：Vue3的setup函数没有绑定组件实例，this.selectedItem完全无效，要直接操作ref变量的.value属性；
2. 未返回showInventoryItem函数：setup返回的对象里没包含这个方法，模板根本调用不了它；
3. props类型错误：inventory实际是数组，但你定义成了Object，得改成Array；

父组件的问题 #

1. 未注册子组件：父组件没导入并注册inventory-bar组件，组件根本无法正常渲染；
2. 事件绑定写法错误：@use-item="useItem(selectedItem)"这种写法会直接执行函数，还传递了父组件里不存在的selectedItem变量，正确写法是直接绑定函数名@use-item="useItem"，Vue会自动把emit的参数传给父组件方法；
3. 未定义inventory数据：父组件模板用了:inventory="inventory"，但setup里没提供这个数据；

修正后的代码 #

子组件 #

import { ref } from 'vue'
export default {
    props: {
        inventory: Array // 修正类型为数组
    },
    setup(props) {
        const selectedItem = ref("");
        function showInventoryItem(item) {
            // 点击的item就是目标项，不需要循环判断
            selectedItem.value = item.id; // 直接操作ref的value，不用this
        }
        return {
            selectedItem,
            showInventoryItem // 返回方法，让模板可以调用
        }
    },
    template: `
      <div id="inventory-bar">
        <h3>Inventory</h3>
        <div id="inventory-grid">
            <button v-for="item in inventory" class="grid-item" @click="showInventoryItem(item)">
                {{item.label}}
            </button>
        </div>
        <div id="item-info" v-show="selectedItem">
            <button @click="$emit('useItem', selectedItem)">Use item</button>
        </div>
      </div>
  `
}

父组件 #

<script type="module">
    import { createApp, ref } from 'vue'
    import InventoryBar from './子组件路径.js' // 导入子组件

    createApp({
        components: {
            InventoryBar // 注册子组件
        },
        setup() {
            // 模拟inventory数据
            const inventory = ref([
                { id: 1, label: "物品1" },
                { id: 2, label: "物品2" }
            ]);

            function useItem(selectedItem) {
                console.log("selectedItem:" + selectedItem);
            }
            return {
                inventory,
                useItem
            }
        }
    }).mount('#app')
</script>
<div id="app">
    <!-- 直接绑定函数名，Vue会自动传递emit的参数 -->
    <inventory-bar :inventory="inventory" @use-item="useItem"></inventory-bar>
</div>

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