如何获取 Topbar 组件传递的标题值并在 data() 返回部分使用该值?我尝试添加一种方法来传递该值,但不幸的是,尽管我能够在父文件中控制台记录该值,但它不起作用。我仍然是 vue js 的初学者,所以我希望在这个问题上得到一些帮助。谢谢!
顶栏模板
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
尝试像下面的代码片段(将所有选项卡传递给子级并在那里循环):
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>