홍준혁

Vue.js 상위-하위 컴포넌트 데이터 전달 본문

Vue.js

Vue.js 상위-하위 컴포넌트 데이터 전달

홍준혁 [Hong-JunHyeok] 2020. 9. 21. 14:19
728x90

서로 다른 컴포넌트 간의 데이터 전달하는 방법 중 상위-하위 컴포넌트 데이터 전달이 있다.

이때 상위 컴포넌트는 하위 컴포넌트에세 props라는 속성을 전달하게 되는데,

 

먼저 props속성을 사용할려면 

Vue.component("child-component", {
                props: ["props"],
});

하위 컴포넌트에 이렇게 선언을 해주어야 한다.

그러면 상위(부모)에게서 전달되는 props를 전달받을 수 있다.

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <child-component v-bind:propsdata="message"></child-component>
        </div>
        <script>
            Vue.component("child-component", {
                props: ["propsdata"],
                template: "<div>{{ propsdata }}</div>",
            });
            new Vue({
                el: "#app",
                data: {
                    message: "Hello Vue! passed from Parent Component",
                },
            });
        </script>
    </body>
</html>

 

위의 코드를 해석하자면 먼저 상위 컴포넌트에서 v-bind:propsdata이라는 부분은 propsdata 즉 props의 속성 이름인데 이 컴포넌트에 message라는 값을 전달하겠다는 것이다. 그럼 하위 컴포넌트는 new Vue의 data의 message값을 전달받게 되었다

 

그럼 child-component는 전달받은 props를 화면에 출력하니까 결과는 

이런 결과값이 나오는 것을 알 수 있다.

 

즉 정리하자면 

 

  1. new Vue()로 인스턴스를 하나 생성한다.
  2. Vue.component()를 사용하여 하위 컴포넌트인 child-component를 생성한다.
  3. chid-component의 내용에 props 속성으로 propsdata를 정의한다.
  4. HTML에 컴포넌트 태그를 추가한다. <child-component> 태그의 v-bind속성에서 propsdata에 상위 컴포넌트인 message를 전달하였다.
  5. child-component는 전달받은 부모의 props를 template에서 출력한다.

 

하지만 new Vue가 상위 컴포넌트라고 정의를 하지 않았는데 어떻게 값을 전달했는지 의문이다.

그 이유는 컴포넌트를 등록함과 동시에 뷰 인스턴스 자체가 상위 컴포넌트가 되기 때문이다.

 

그래서 새로운 컴포넌트를 등록하게 되면 기존의 컴포넌트는 상위 컴포넌트가 되고 새로 등록된 컴포넌트가 하위 컴포넌트가 된다. 

728x90

'Vue.js' 카테고리의 다른 글

Vue.js-Router(뷰 라우터)  (0) 2020.09.21
Vue.js-하위에서 상위 컴포넌트로 데이터 전달  (0) 2020.09.21
Vue.js-watch속성  (1) 2020.09.14
Vue.js-computed  (1) 2020.09.14
Vue.js-폼 입력 바인딩  (1) 2020.09.14
'Vue.js' Related Articles more
Comments