Skip to content

Vue:Component

Vue의 컴포넌트.

Categories

컴포넌트 부모-자식 데이터 흐름

Vue.js에서 부모-자식 컴포넌트 관계는 다음과 같다:

  • 부모는 props를 통해 자식에게 데이터를 전달하고, (아래로)
  • 자식은 events를 통해 부모에게 메시지를 보냅니다. (위로)

Vue-components-props-events.png

컴포넌트 작성시 유의사항

  • v-model에 해당하는 값은 Object 사용하지 말자.

Component event

v-on을 이용한 사용자 지정 이벤트: 모든 Vue 인스턴스는 다음과 같은 이벤트 인터페이스를 구현합니다.

  • $on(eventName)을 사용하여 이벤트를 감지 하십시오.
  • $emit(eventName)을 사용하여 이벤트를 트리거 하십시오.

또한, 부모 컴포넌트는 자식 컴포넌트가 사용되는 템플릿에서 직접 v-on 을 사용하여 자식 컴포넌트에서 보내진 이벤트를 청취할 수 있습니다.

WARNING

$on은 자식에서 호출한 이벤트는 감지하지 않습니다. v-on을 템플릿에 반드시 지정해야 합니다. 아래의 예제를 보십시오.

Example

html file: 

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

JavaScript file: 

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

이 예제에서는 하위 컴포넌트가 외부에서 발생 하는 것과 완전히 분리 된다는 점에 유의해야 합니다. 부모 컴포넌트가 신경 쓸 수 있는 경우를 대비하여 자체 활동에 대한 정보를 보고 하는 것뿐입니다.

컴포넌트 등록 및 이름 규칙

컴포넌트를 등록할 때는 항상 이름을 지어줘야 합니다. 예를 들어 우리가 살펴봤던 전역등록은 아래처럼 하죠. 

Vue.component('my-component-name', { /* ... */ })

컴포넌트의 이름은 Vue.component의 첫번째 인자입니다.

컴포넌트에 부여한 이름은 그 컴포넌트를 어디에 쓸 지에 따라 다를 수 있습니다. 컴포넌트를 (스트링 템플릿이나 싱글파일 컴포넌트로 사용하지 않고) DOM에서 바로 사용할 때는 W3C 규칙에 따라서 사용자 정의 태그의 이름처럼 쓰는 것을 추천합니다(모두 소문자로 쓰고 단어는 하이픈(-)으로 연결하는 거죠). 이렇게 하면 지금 있거나 앞으로 작성할 HTML 엘리먼트와 충돌하는 것을 피할 수 있습니다.

기타 컴포넌트 이름을 지을 때 숙지할 내용은 스타일 가이드를 참고해주세요.

이름 없이 객체를 직접 전달할 경우 (components:{afLoginForm}) Template 에서 <af-login-form>으로 사용 가능하다.

how to call child component method from parent vue js

부모 컴포넌트가 자식 컴포넌트의 페소드를 직접 접근하는 방법은 ref를 사용하면 된다. 

import ChildForm from './components/ChildForm'

new Vue({
  el: '#app',
  data: {
    item: {}
  },
  template: `
  <div>
     <ChildForm :item="item" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.$refs.form.submit()
    }
  },
  components: { ChildForm },
})

See also

Favorite site