Vue3 - Component 간 통신
목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance [Vue3] - Reactivity (반응형) Vue3 - 시작하기 Component 간 통신 - Props Props 는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전송할때 사용합니다. Vue 에서는 상위 컴포넌트에서 하위 컴포넌트로 통신하기 위한 방법으로 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 는 하위 컴포넌트에서 상위 컴포넌트로