Vue.js 컴포넌트 통신 방식과 props

 

 

 

컴포넌트 통신 방식

-화면 안에 여러개의 콤포넌트를 만들면 콤포넌트 가느이 관계가 생김

-각각의 컴포넌트가 각각의 데이터를 갖는데, 서로 공유하기 위해선

a.props랑 b.이벤트를 사용해야함.

-사용하기 위해서는 규칙을 우리가 알아야함

-규칙이 있어야 데이터의 흐름을 추측하고 버그를 잡기 쉬워진다. (만약, 규칙이 없다면 어디서 부터 데이터가 왔는지 확인하기 어려워짐)

-위에서 아래로 내려가는건 props, 아래에서 위로 올라가는건 event

 

1.props 속성

-Vue라는 인스턴스를 만들고 el로 #app

-app header이라는 콤포넌트를 만들어 준다.

-여기서 teamplate만 따로 사용할것,

         new Vue({
             el: '#app',
             components:{
                 'app-header':{
                     template: '<h1>header</h1>'
                 }
             }
         })

 

 

-appHeader이라는 새로운 변수를 생성하고,

new Vue에 있는 app-header이라는 콤포넌트를 넣어준다.

        var appHeader = {
                     template:'<h1>header</h1>'
                 }

 

*new Vue에 있던 콤포넌트는 새로운 변수의 appHeader을 적어주면 된다.

 

-완성된 코드

    <script>
        
        var appHeader = {
                     template:'<h1>header</h1>'
                 }
        
         new Vue({
             el: '#app',
             components:{
                 'app-header': appHeader
             }
         })
    </script>

 

-app div안에서 새로 만든 app-header이라는 태그를 불러준다.

 

    <div id="app">
        <app-header></app-header>
    </div>

 

-live server로 확인하면 제대로 태그가 먹힌채로 문자열이 출력 되는걸 볼 수 있다.

 

 

- Vue 인스턴스에 data 항목을 추가하고, 적고 싶은 메세지를 기입한다. live server로 확인하면 메세지가 잘 출력 되는걸 확인 할 수 있다.

 

         new Vue({
             el: '#app',
             components:{
                 'app-header':appHeader
             },
             data: {
                 message:'hi'
             }
         })
    </script>

 

 

-Root를 클릭하면 data 중 message의 'hi'가 보인다.

 

 

 

-props의 문법은 v-bind: 프롭스의 속성 이름 = “상위 콤포넌트의 데이터 이름” 으로 작성하면 된다.

-현재 root의 데이터 이름은 message이고 변수안에 props가 있고, propsdata라는 임의의 값을 넣어준다.

 

 

       var appHeader ={
                template: '<h1>header</h1>'
                props: ['propsdata']
        }

 

 v-bind: 프롭스의 속성 이름 = “상위 콤포넌트의 데이터 이름"
 ===>
 <app-header v-bind:프롭스 속성 이름 ="상위 콤포넌트의 데이터 이름"></app-header>
 ===>
<app-header v-bind:propsdata ="message"></app-header>

 

-라이브 서버로 확인하면, AppHeader에도  props data인 hi가 들어가 있는걸 확인 할 수 있다.

(*root에도 여전히 값이 있다!)

 

-상위 콤포넌트 값이 바뀌었을 때, 하위 콤포넌트 값도 바뀌어서 그대로 내려옴

-메세지를 바꾸어 보았다.

 

-그대로 AppHeader에도 내려오는걸 볼 수 있다.

 

 

 

 

-변수의 {{ }} 문법을 사용해서 propsdata를 넣어준다면, Vue 인스턴스에 입력한 데이터에 따라 결과가 달라짐

 

        var appHeader ={
                template: '<h1>{{propsdata}}</h1>',
                props: ['propsdata']
        }

 

-new Vue에 있던 message인 hi가 출력되는걸 확인 할 수 있다.

 

*그외에도 Root에서 변경한 값을 AppHeader에서도 확인 할 수 있다.