Vue에서는 하위 구성 요소에서 방출된 값을 가져온 다음 이를 상위 구성 요소의 반환 데이터에 사용하려면 어떻게 해야 합니까?

Question

Topbar 구성 요소가 전달한 제목 값을 가져오고 해당 값을 data() 반환 부분에 사용하는 방법은 무엇입니까? 값을 전달하는 메서드를 추가해 보았지만 안타깝게도 상위 파일의 값을 콘솔 로그에 기록할 수 있었지만 작동하지 않았습니다. 저는 아직 vue js의 초보자이므로 이 문제에 대한 도움을 받고 싶습니다. 감사해요!

으아아아

상단 표시줄 템플릿

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

Answer 1

아래와 같은 코드 조각을 사용해 보세요(모든 탭을 하위 항목에 전달하고 거기에서 반복).

으아아아 으아아아