20190221_VUE 컴포넌트(PROPS)

by duckduck0054

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
    <my-component1 v-bind:propsdata="parentData"></my-component1>
    </div>
  </body>
  <script type="text/javascript">
  	// 컴포넌트는 각각 자체적으로 고유한 유효 범위(Scope)를 갖고있습니다. 
    // 각 컴포넌트의 유효 범위는 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없습니다.
    
    // Vue에서는 자체적으로 정의한 컴포넌트 데이터 전달 방법을 따라야 합니다. 가장 기본적인 방법은 
    // 상위(부모) -> 하위(자식) 컴포넌트 간의 데이터 전달 방법입니다.

		// 전역 컴포넌트와 지역 컴포넌트 내용처럼 인스턴스에 컴포넌트를 등록하면 인스턴스는 상위 컴포넌트, 
    // components 속성에 등록한 컴포넌트는 하위 컴포넌트가 됩니다.

		// 상위에서 하위로는 props라는 속성을 사용하여 데이터를 전달할 수 있고, 하위에서 상위로는 $emit을 사용하여 이벤트를 발생시킵니다.
    // 상위에 있는 데이터를 하위에서 사용하기 위해서 props라는 속성을 이용한다 설명했습니다. props 속성은 하위 컴포넌트에서 사용합니다.
    
    // *props의 속성이름은 꼭 소문자로 입력해야합니다.
    // Vue.component('child-component', {
    // 	props: ['속성이름']
		// });
    
    // <child-component v-bind:속성이름="상위컴포넌트 data 속성명"></child-component>
    var cmp1 = {
        template: '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}, 부모 데이터 : {{ propsdata }}</div>',
        data: function() {
            return {
            cmp1Data : 100
            }
        },
        props: ['propsdata']
    };
    new Vue({
        el: '#app',
        // 지역 컴포넌트 등록
        components: {
            'my-component1': cmp1
        },
        data: {
        	parentData: "new Vue()"
        }
    });
  </script>
</html>