You will be fine

<Vue.js> 4. 컴포넌트

by BFine

공부(2018~2019) - 스킨변경전/Vue.js

반응형

Vue.js 컴포넌트(1)

1. 컴포넌트 사용하기

  • 컴포넌트 는 HTML 마크업, 자바스크립트 로직을 포함한 하나의 덩어리이다.
  • 이를 통해 캡슐화 가 가능해지고 재사용성 이 증가한다.
  • 컴포넌트는 Vue 오브젝트를 확장한 오브젝트이다.

1.1 글로벌 컴포넌트

  • Vue.component 는 컴포넌트를 글로벌 하게 등록하는 메서드이다.
  • 주의할점은 컴포넌트에서 data를 정의할때 반드시 함수로 정의 해야 한다.
  • 컴포넌트이름은 하이픈과 소문자로만 구성할 수 있다.
<body>
  <div id="app">
    <date></date>
  </div>
</body>
<script type="text/javascript" src="https://unpkg.com/vue@2.3"></script>
<script type="text/javascript">
  Vue.component('date',{
    template : '<div>{{ now }}</div>',
    data : function(){
      return {
        now : new Date()
      }
    }
  });
  new Vue({
    el : '#app'
  });
</script>

1.2 로컬컴포넌트

  • 컴포넌트를 Vue 인스턴스 or 컴포넌트 옵션으로 등록해 컴포넌트 내부에서만 사용 하도록 지정할 수 있다.
<body>
  <div id="app">
    <msg></msg>
  </div>
</body>
<script type="text/javascript" src="https://unpkg.com/vue@2.3"></script>
<script type="text/javascript">
let HwConponent = {
  template : '<div>{{message}}</div>',
  data : function(){
    return {
      message : 'Hello World'
    }
  }
};
new Vue({
  el : '#app',
  components:{
    msg : HwConponent
  }
</script>

1.3 제한사항

  • ul,table, select 등 일부 요소 내부에서는 컴포넌트를 사용할 수 없다.
  • 이중 table에서 사용하려면 is 옵션을 사용한다.
  <table>
    <tr is="컴포넌트명"></tr>
  </table>

2. 데이터전달

  • 다른 컴포넌트와 데이터를 주고 받아야하는 경우가 있다.
  • 컴포넌트는 자식 or 부모 컴포넌트에게만 데이터를 전달 할 수 있다.

2.1 부모-자식 컴포넌트 관계

  • 자식 컴포넌트는 부모 컴포넌트에게 이벤트를 통해야만 데이터 전달이 가능하다.

출처

반응형
저작자표시 비영리

'공부(2018~2019) - 스킨변경전 > Vue.js' 카테고리의 다른 글

<Vue.js> 5. 단일파일 컴포넌트  (0) 2019.05.31
<Vue.js> 3. 템플릿 문법(2)  (0) 2019.05.25
<Vue.js> 2. 템플릿 문법(1)  (0) 2019.05.23
<Vue.js> 1. 인스턴스  (0) 2019.05.22

블로그의 정보

57개월 BackEnd

BFine

활동하기

티스토리툴바