Vue中如何获取子组件emit的值并赋值给父组件data？

问题场景 #

想获取Topbar子组件传递的标题值，赋值到父组件data的title变量中。目前能在父组件控制台打印出传递的值，但this.title = title赋值后，title变量似乎没更新。

排查与解决步骤 #

1. 先确认赋值是否真的未生效 #

你的代码逻辑本身是正确的，大概率是没有在模板中渲染title，导致误以为赋值失败。在父组件模板中添加title的渲染代码，验证是否更新：

<template>
    <div>
        <Topbar :tabs='tabs' @pass-data="getTabTitle"/>
        <!-- 新增此行，实时显示title的值 -->
        当前选中标题：{{ title }}
    </div>
</template>

点击Topbar的选项后，如果这里能显示对应的标题，说明赋值已经生效，只是之前没在视图中体现。

2. 检查this的指向（可选） #

如果确实没赋值，先确认getTabTitle方法中this的指向是否正确。在方法中打印this：

methods: {
    getTabTitle(title) {
        console.log(this) // 应该输出当前父组件的Vue实例
        console.log(title)
        this.title = title
    }
}

如果打印的this不是Vue实例，说明方法的this被改变了（比如用了箭头函数定义方法），换成普通函数即可（你当前的写法是对的，这步主要是排查）。

3. 确认子组件事件触发正常 #

检查子组件的onClick方法是否正确触发：点击Topbar的Sec 1或Sec 2时，控制台是否打印出对应的标题。如果能打印，说明$emit('pass-data', tabName)已经成功传递数据到父组件。

完整可运行的父组件代码 #

<template>
    <div>
        <Topbar :tabs='tabs' @pass-data="getTabTitle"/>
        当前选中标题：{{ title }}
    </div>
</template>
<script>
import Topbar from "../components/Navigation/Topbar.vue";

export default {
    name: "Progress",
    components: {
        Topbar,
    },  
    data() {
        return {
            title: '',
            tabs: [  
                {
                    link:'',
                    name: "Sec 1",
                    dropdown: false,
                    dropdownTabs:[]
                },
                {
                    link:'',
                    name: "Sec 2",
                    dropdown: false,
                    dropdownTabs:[]
                }
            ]
        }
    },
    methods: {
        getTabTitle(title) {
            console.log(title)
            this.title = title
        }
    },
}
</script>

子组件代码无需修改 #

你的Topbar组件代码逻辑正确，$emit事件传递数据的写法没问题。

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