Dalam Vue, bagaimanakah saya boleh mendapatkan nilai yang dipancarkan daripada komponen anak dan kemudian menggunakannya dalam data pulangan komponen induk?
P粉523625080
P粉523625080 2023-12-19 20:43:06
0
1
445

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>

P粉523625080
P粉523625080

membalas semua(1)
P粉667649253

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan