Dans Vue, comment puis-je obtenir la valeur émise par un composant enfant, puis l'utiliser dans les données de retour du composant parent ?

Question

Comment obtenir la valeur du titre transmise par le composant Topbar et utiliser cette valeur dans la partie de retour data() ? J'ai essayé d'ajouter une méthode pour transmettre la valeur, mais malheureusement, même si j'ai pu enregistrer la valeur dans le fichier parent, cela n'a pas fonctionné. Je suis encore débutant en vue js, j'aimerais donc de l'aide sur ce problème. Merci!

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

Modèle de barre supérieure

<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

Essayez l'extrait de code comme ci-dessous (passez tous les onglets à l'enfant et bouclez-y) :

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>