💡インスタンス&構成部品

01.ビューインスタンス

01-1. ビューインスタンスの定義とプロパティ

new Vue({
	...
});

01-2. ビューインスタンスオプションのプロパティ

01-3. ビューインスタンスの有効範囲

new Vue({
	el : '#app',
  	data :  {
    	message : 'Hello Vue.js!'
  }
});

  <div id="app"></div>
  {{ message }}

01-4. ビューインスタンスのライフサイクル

02.ビュー構成部品

02-1. 構成部品とは

02-2. 構成部品の登録

Vue.component('컴포넌트 이름', {
	// 컴포넌트 내용
});

new Vue({
	components: {
		'컴포넌트 이름' :  컴포넌트 내용
	}	
});

02-3. ゾーン構成部品とグローバル構成部品の違い

<div id="app">
        <h3>첫 번째 인스턴스 영역</h3>
        <!-- 전역 컴포넌트 표시 -->
        <my-component></my-component> 
        <!-- 지역 컴포넌트 표시 -->
        <my-local-component></my-local-component> 
</div>
 <hr>
<div id="app2">
    <h3>두번째 인스턴스 영역</h3>
    <!-- 전역 컴포넌트 표시 -->
    <my-component></my-component> 
    <!-- 지역 컴포넌트 표시 -->
    <my-local-component></my-local-component> 
</div>

<script>
    //전역 컴포넌트 등록
    Vue.component('my-component' ,{
        template: '<div>전역 컴포넌트가 등록되었습니다!</div>'
    });

    //지역 컴포넌트 등록
    var cmp = {
        template:'<div>지역 컴포넌트가 등록되었습니다!</div>' //컴포넌트 내용
    };

    new Vue({
        el:'#app',
        components:{ // 지역 컴포넌트 등록
            'my-local-component': cmp
        }
    });
    new Vue({
        el:'#app2' 
    });
</script>	

03.ビュー素子通信

03-1. 上下部品関係

の最も基本的なデータ転送方法は、親(親)−子(子)コンポーネント間のデータ転送方法である.

03-2. 親から子へのデータの転送

Vue.component('child-component', {
	porps:['props 속성 이름'],
});      

<child-component v-bind:props 속성 이름 = "상위 컴포넌트의 data 속성"></child-component> 	      

☝v-bindは?

<p v-bind:id = "idA">아이디 바인딩</p>
<p v-bind:class = "classA">클래스 바인딩</p>
<p v-bind:style = "styleA">스타일 바인딩</p>
<script>
	new Vue({
		el: '#app',
		data: {
		   idA: 10,
		   classA: 'container',
		   styleA: 'color:blue'
		}	
	});
</script> 

   <div id="app">
        <child-component v-bind:propsdata ="message"></child-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('child-component',{
            props : ['propsdata'],
            template:'<p>{{propsdata}}</p>',
        });

        new Vue({
            el: '#app',

            data:{
                message: 'Hello Vue!'
            }
        });
    </script>

03-3. サブコンポーネントから親コンポーネントへのイベントの転送

// 이벤트 발생							      
this.$emit('이벤트명');							      
							      

// 이벤트 수신
<child-component v-on:이벤트명 = "상위 컴포넌트의 메서드명"></child-component>							      

<div id="app">
    <child-component v-on:show-log ="printText"></child-component>
</div>

<script>
    Vue.component('child-component',{
        template:'<button v-on:click="showLog">show</button>',
        methods:{
            showLog : function(){
                this.$emit('show-log');
            }
        }
    });

    new Vue({
        el: '#app',

        methods: {
            printText: function(){
                alert('receive an event');
            }
        }
    });
</script>					    					   				    

03-4. 同じレベルの構成部品間で通信

03-5. 非相関コンポーネント間の通信-イベントバス

<div id="app">
    <child-component></child-component>
</div>

<script>
    var eventBus = new Vue(); // 이벤트 버스를 위한 추가 인스턴스 1개 생성
    Vue.component('child-component', {
        template:'<div>하위 컴포넌트 영역입니다.<button v-on:click="showLog">show</button></div>',
        methods: {
            showLog: function(){
                eventBus.$emit('triggerEventBus', 100); // 이벤트를 보내는 컴포넌트
            }
        }
    });
    var app = new Vue({
        el: '#app', 
        created: function(){
            eventBus.$on('triggerEventBus', function(value){ // 이벤트를 받는 컴포넌트
                console.log("이벤트를 전달 받음. 전달 받은 값:" , value);
            });
        }
    });
  </script>					      					            

doit vueを参照してください。js