Vue3 - Component 간 통신
목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 Component 간 통신 - PropsVue 에서는 상위 컴포넌트에서 하위 컴포넌트로 통신하기 위한 방법으로 Props 를 제공합니다. Props 를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려줍니다. 하위 컴포넌트에서 전달 받은 Props 를 사용하기 위해v-bind 를 이용해 Props 이름=”상위컴포넌트의 데이터이름“ 형식으로 Props 를 매팽해 줍니다. <div id="app"> <app-header v-bind:title="appTitle"></app-header></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> Vue.createApp({ data() { return { appTitle: '프롭스 넘기기' } }, components: { // '컴포넌트 이름': 컴포넌트 내용 'app-header': { template: '<h1>{{title}}</h1>', props: ['title'] } } }).mount('#app')</script> Component 간 통신 - Event하위 컴포넌트에서 상위 컴포넌트와 통신하기 위한 방법으로는 Event 를 제공합니다. <div id="app"> <app-content v-on:refresh="showAlert"></app-content></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> var appContents = { template: ` <p> <button v-on:click="sendEvent">갱신</button> </p> `, methods: { sendEvent() { this.$emit('refresh'); } } } // Root 컴포넌트 Vue.createApp({ methods: { showAlert() { alert('새로고침') } }, components: { // '컴포넌트 이름': 컴포넌트 내용 'app-content': appContents } }).mount('#app')</script>