如何取得 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> 
嘗試像下面的程式碼片段（將所有選項卡傳遞給子級並在那裡循環）：
const app = Vue.createApp({ 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 } } }) app.component('topbar', { template: ` <div v-for="(tab, i) in tabs" :key="i"> <button @click="send(tab.name)">{{ tab.name }}</button> </div> `, props: ['tabs'], methods: { send(title) { this.$emit('passData', title) } } }) app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <b>{{ title }}</b> <topbar :tabs='tabs' @pass-data="getTabTitle"></topbar> </div>