Wie erhalte ich in Vue den ausgegebenen Wert von einer untergeordneten Komponente und verwende ihn dann in den Rückgabedaten der übergeordneten Komponente?

Question

Wie erhalte ich den von der Topbar-Komponente übergebenen Titelwert und verwende diesen Wert im data()-Rückgabeteil? Ich habe versucht, eine Methode zum Übergeben des Werts hinzuzufügen, aber leider hat es nicht funktioniert, obwohl ich den Wert in der übergeordneten Datei per Konsole protokollieren konnte. Ich bin noch ein Anfänger in Vue JS, daher hätte ich gerne Hilfe zu diesem Problem. Danke!

<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>

Vorlage für die obere Leiste

<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>