송민준의 개발노트

컴포넌트 본문

웹/Vue

컴포넌트

송민준 2020. 1. 31. 16:19

1. 전역 컴포넌트

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <button type="button" name="button">컴포넌트 등록</button>
      <my-component></my-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      Vue.component('my-component', {
        template: '<div>전역 컴포넌트가 등록되었음</div>'
      });
      new Vue({
        el: '#app'
      });
    </script>
  </body>
</html>

 

2. 지역 컴포넌트

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <button>컴포넌트 등록</button>
      <my-local-component></my-local-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      var cmp = {
        template: '<div>지역 컴포넌트가 등록되었습니다.</div>'
      }
      new Vue({
        el: '#app',
        components: {
          'my-local-component': cmp
        }
      });
    </script>
  </body>
</html>

 

3. 지역+전역(전역은 모든 el에서 가능, 지역은 특정 el에서 가능)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Sample</title>
  </head>
  <body>
    <div id="app">
      <h3>첫 번째 인스턴스 영역</h3>
      <my-global-component></my-global-component>
      <my-local-component></my-local-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script>
      Vue.component('my-global-component', {
        template: '<div>전역 컴포넌트입니다.</div>'
      });
      var cmp = {
        template: '<div>지역 컴포넌트가 등록되었습니다.</div>'
      };
      new Vue({
        el: '#app',
        components: {
          'my-local-component': cmp
        }
      });
    </script>
  </body>
</html>

 

'웹 > Vue' 카테고리의 다른 글

뷰 템플릿  (0) 2020.02.09
뷰 리소스, 액시오스  (0) 2020.02.08
뷰 라우터  (0) 2020.02.02
컴포넌트 통신  (0) 2020.01.31
라이프 사이클  (0) 2020.01.31
'웹/Vue' Related Articles more