在Vue中，如何从子组件中获取发射的值，然后在父组件的返回数据中使用它？

Question

如何获取 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>

Answer 1

尝试像下面的代码片段（将所有选项卡传递给子级并在那里循环）：

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>