Dalam Vue, bagaimanakah saya boleh mendapatkan nilai yang dipancarkan daripada komponen anak dan kemudian menggunakannya dalam data pulangan komponen induk?

Question

Bagaimana untuk mendapatkan nilai tajuk yang diluluskan oleh komponen Topbar dan menggunakan nilai tersebut dalam bahagian pulangan data()? Saya cuba menambah kaedah untuk lulus nilai, tetapi malangnya, walaupun saya dapat konsol log nilai dalam fail induk, ia tidak berfungsi. Saya masih pemula dalam vue js jadi saya ingin mendapatkan bantuan tentang isu ini. Terima kasih!

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

Templat bar teratas

<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

Cuba coretan kod seperti di bawah (luluskan semua tab kepada kanak-kanak dan gelung di sana):

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>