如何获取 Topbar 组件传递的标题值并在 data() 返回部分使用该值？我尝试添加一种方法来传递该值，但不幸的是，尽管我能够在父文件中控制台记录该值，但它不起作用。我仍然是 vue js 的初学者，所以我希望在这个问题上得到一些帮助。谢谢！

<template>
    <div>
        <Topbar :tabs='tabs' @pass-data="getTabTitle"/>
        
    </div>
</template>
<script>
    import Topbar from "../components/Navigation/Topbar.vue";

    export default {
        name: "Progress",
        components: {
            Topbar,
    },  
        
        data() {
            return {
                title:'',//have the emitted value here
                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>

顶栏模板

<template>
  <ul class="navbar-nav">
                    
       <li @click="onClick(tab.name)"
                        v-for="(tab, index) in tabs.filter((tab)=> tab.dropdown===false)" :key="index">
                        {{tab.name}}
                    </li>
      <DropdownMenu v-for="(tab, index) in tabs.filter((tab)=> tab.dropdown===true)" :key="index"
                        :tab="tab" />

  </ul>
</template>

<script>
    import DropdownMenu from "./DropdownMenu.vue";

    export default {
        name: "Topbar",
        props: {
            tabs: Array
        },
        components: {
            DropdownMenu,

    },
     methods: {
        onClick(tabName) {
            this.$emit('pass-data',tabName)
        }
    }   

    }
</script>