기록하는 곳

2. 인스턴스 & 컴포넌트

  • 인스턴스 : 뷰로 화면을 개발하기 위한 기본 단위 ( new Vue() )
  • 컴포넌트 : 독립적으로 존재할 수 있는 모듈

    컴포넌트는 객체와 다르다. 독립적으로 존재할 수 있어야 하기에, 컴포넌트는 여러개의 객체로 이루어질 수 있다.

인스턴스

말 그대로 객체를 생성할 때 만드는 인스턴스를 뜻한다.

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

인스턴스 옵션

  • el : 적용된 DOM 요소를 지정해줌

  • data : vue 인스턴스에 해당 data를 추가해줌

  • Lifecycle hooks : 인스턴스 초기화 과정(Lifecycle) 중간에 사용자 정의 로직을 넣고 싶을때 사용함 (mounted, updated 등...)
    (자세한건 [Vue LifeCycle.md](./Vue LifeCycle) 참고)

  • methods : 메서드를 선언하며, 여기에 선언된 메서드들 중에서 update Lifecycle이 동작할 때(=아무 변수나 바뀔 때) 이 공간에 선언되어 있는 모든 메서드가 일괄적으로 실행된다.

  • computed : 값을 리턴하는 메서드, 단순히 값을 계산할 때 사용하는게 좋다.

    methods는 값을 변경할 때 updated 라이프사이클이 실행된다. (예제)

  • watch : 특정 값이 변하면 지정해준 작업을 한다.

파라미터로 값을 받거나 데이터를 변경해줘야 한다면 methods를 사용해야겠지만, 그게 아니라면 computed를 사용하자.


컴포넌트

화면을 구성할 수 있는 블록(영역)을 의미한다.
컴포넌트간의 관계는 Tree구조와 유사하다.

컴포넌트 등록

  • 전역 컴포넌트
    Vue 인스턴스 바깥에서 Vue 생성자를 통해 .component()를 호출한다.
<html>
  <head>
    <!-- 중략... -->
  </head>
  <body>
    <!-- 중략... -->
    <div id="app">
      <my-component></my-component>
    </div>
    <script src="vue CDN 호출..."></script>
    <script>
      Vue.Component('my-component', {
        template: '<div>전역 컴포넌트가 등록되었습니다!</div>',
      });

      new Vue({
        el: '#app',
      });
    </script>
  </body>
</html>
  • 지역 컴포넌트
    전역 컴포넌트와 다르게 Vue 인스턴스 내부에 선언한다.
<!-- ... -->
<script>
  new Vue({
    el: '#app',
    components: {
      'my-component': '<div>지역 컴포넌트가 등록되었습니다</div>',
    },
  });
</script>

컴포넌트간 데이터 전달

부모 -> 자식

  • props 속성
    • 부모에서 전달할 때
    <child-component v-bind:전달할key값="전달할 데이터"></child-component>
    • 자식에서 받을 때
    <script>
  export default {
      // ...
      props: {
          '사용할key값': '전달받은key값',
          // 상속받은 key를 그대로 사용한다면 아래처럼 표현
          '전달받은key값',
      }
      // ...
  }
</script>

자식 -> 부모

자식의 요소를 클릭하거나 할 때 부모의 이벤트를 실행시키고 싶거나 데이터를 전달할 때 사용한다.

  • 자식 컴포넌트
    // 이벤트 발생
this.$emit('상위 컴포넌트에 전달할 이벤트명');
  • 부모 컴포넌트
    <child-component v-on:이벤트명="실행할 부모의 메서드명"></child-component>

형제 컴포넌트 간 통신 (Event Bus 이용)

  • 이벤트를 보내는 컴포넌트 : $emit() 메서드로 보낸다.
    <script>
  var eventBus = new Vue();
  // ...
  methods: {
      메서드명: function() {
          eventBus.$emit('이벤트명', 데이터);
      }
  }
</script>
  • 이벤트를 받는 컴포넌트 : $on() 메서드로 받는다.
    <script>
  // ...
  methods: {
      created: function() {
          eventBus.$on('이벤트명', (데이터) => {/*기능구현*/})
      }
  }
</script>
Last Updated: