Local / Global Component

등록해야지 사용할 수 있는 로컬 컴포넌트와 전역으로 사용할 수 있는 글로벌 컴포넌트 예제

by ChangJoo Park

HTML

<div id="app">
  <h1>Global Component / Local Component</h1>
   {{message}}
   <input type="text" v-model="message">
   <hr>
   현재 : {{itemCount}}
   <button @click="itemCount++">+</button>   
   <button @click="itemCount--">-</button>
   <global-component 
     v-bind:message="message"
     v-bind:count="itemCount"
   ></global-component>
   <local-component></local-component>
</div>

<template id="global-component">
  <div>
  	<h3>Global Component</h3>
    {{message}}
    
    <div v-for="i in count">
      Hello
    </div>
    <local-component></local-component>
  </div>
</template>

JavaScript

var LocalComponent = {
	template: '<h3>Local Component</h3>'
}

Vue.component('global-component', {
	template: '#global-component',
  props: ['message', 'count'],
  components: {
  	'local-component': LocalComponent
	}
})

new Vue({
	el: '#app',
  data: function () {
  	return {
    	message: 'Vue Instance',
      itemCount: 0
    }
	},
  watch: {
  	itemCount: function(newVal, oldVal) {
    	if (newVal < 0) {
      	this.itemCount = 0
			}
    }
  },
  components: {
  	'local-component': LocalComponent
  }
})