글로벌/로컬 컴포넌트 사용 방법

Vue.component를 사용한 전역 컴포넌트와 객체를 이용한 로컬 컴포넌트 예제

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app1" class="app">
  <h1>Vue App 1</h1>
  <global-child></global-child>
  <local-child></local-child>
</div>

<div id="app2" class="app">
  <h1>Vue App 2</h1>
  <global-child></global-child>
  <!-- Not Work -->  
   <local-child></local-child>
</div>

<template id="global-child">
  <div>
    <h1>Global Child</h1>
  </div>
</template>

<template id="local-child">
  <div>
    <h1>Local Child</h1>
  </div>
</template>

CSS

.app {
  width: 200px;
  height: 200px;
  float: left;
  border: 1px solid tomato;
  margin-right: 100px;
}

JavaScript

// Global Component
Vue.component('global-child', {
	template: '#global-child'
});

// Local Component
var LocalComponent = {
	name: 'local-child',
	template: '#local-child'
};

var app1 = new Vue({
	el: '#app1',
  components: {
  	'local-child': LocalComponent
  }
});

var app2 = new Vue({
	el: '#app2'
});