컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있습니다.



Vue.component('todo-list', {
  template: '<div>Todo List</div>'
});
  
new Vue({
  el: '#root',
  template: '<todo-list></todo-list>'
});

2. 컴포넌트 사용법

3. 컴포넌트 뼈대 만들기

<script type="application/javascript">
  Vue.component('todo-content', {
    template: `
    <div style="width: 720px; background: #dddddd; margin: 0 auto;">
      <h1>Todo List</h1>
      <slot></slot>
    </div>`
  });
  new Vue({
    el: '#root',
    template: `<todo-content></todo-content>`,
  });
</script>

소스코드: https://goo.gl/uoKEji

4. 컴포넌트 내용 만들기

<script type="application/javascript">
  Vue.component('todo-content', {
    template: `
      <div class="todo-content">
         <h1>Todo List</h1>
         <slot></slot>
      </div>`
  });

  Vue.component('todo-list', {
    template: `
      <ul>
        <li>예시값</li>
      </ul>`
  });

  new Vue({
    el: '#root',
    template: `
      <todo-content>
        <todo-list></todo-list>
      </todo-content>`,
  });
</script>

소스코드: https://goo.gl/XYguQp

5. 자식 컴포넌트 만들기

Vue.component('todo-content', {
  template: `
    <div class="todo-content">
      <h1>Todo List</h1>
      <slot></slot>
    </div>`
});

Vue.component('todo-list', {
  data() {
    return {
      items: ['A', 'B', 'C']
    }
  },
  template: `
    <ul>
      <todo-item 
        v-for="item in items" 
        :name="item"
      ></todo-item>
    </ul>`
});

Vue.component('todo-item', {
  props: ['name'],
  template: `<li>{{name}}</li>`
});

new Vue({
  el: '#root',
  template: `
    <todo-content>
      <todo-list></todo-list>
    </todo-content>`,
});

소스코드: https://goo.gl/5GuVSX

6. 부모 자식간 이벤트 연결 - 완료 버튼

Vue.component('todo-list', {
  data () {
    return {
      items: ['A', 'B', 'C']
    }
  },
  methods: {
    completed (item) {
      const items = this.items;
      const i = items.indexOf(item);
      items.splice(i, 1);
    }
  },
  template: `
      <ul>
        <todo-item
          v-for="item in items"
          :key="item"
          :name="item"
          v-on:completed="completed"></todo-item>
      </ul>`
});

Vue.component('todo-item', {
  props: ['name'],
  methods: {
    complete () {
      this.$emit('completed', this.name);
    }
  },
  template: `
    <li>
      {{name}} 
      <button class="btn" @click="complete">완료</button>
    </li>`
});

소스코드: https://goo.gl/7mcdEs

7. 부모의 데이터가 변경 될 때 1 - 할일 추가

Vue.component('todo-list', {
  data() {
    return {
      inputItem: '',
      items: ['A', 'B', 'C']
    }
  },
  methods: {
    completed(item) {
      const items = this.items;
      const i = items.indexOf(item);
      items.splice(i, 1);
    },
    appendTodoItem() {
      this.items.push(this.inputItem);
      this.inputItem = '';
    }
  },
  template: `
      <div>
        <input class="input-text" type="text" v-model="inputItem"/>
        <button class="btn" @click="appendTodoItem">추가</button>
        <ul>
          <todo-item
            v-for="item in items"
            :key="item"
            :name="item"
            v-on:completed="completed"></todo-item>
        </ul>
      </div>`
});

소스코드: https://goo.gl/YmU8ak

8. 부모의 데이터가 변경 될 때 2 - 완료상태

Vue.component('todo-list', {
  data() {
    return {
      inputItem: '',
      items: [
        {job: 'A', isComplete: false},
        {job: 'B', isComplete: false},
        {job: 'C', isComplete: false}
      ]
    }
  },
  methods: {
    completedItem(job, isComplete) {
      const item = this.items.find(v => v.job === job);
      item.isComplete = isComplete;
    },
    deleteItem(job) {
      this.items = this.items.filter(v => job !== v.job);
    },
    appendTodoItem() {
      if (!this.inputItem) {
        window.alert('할일을 입력해주세요.');
        return false;
      }

      this.items.push({job: this.inputItem, isComplete: false});
      this.inputItem = '';
    }
  },
  template: `
      <div>
        <input class="input-text" type="text" v-model="inputItem"/>
        <button class="btn" @click="appendTodoItem">추가</button>
        <ul>
          <todo-item
            v-for="item in items"
            :key="item.job"
            :job="item.job"
            :isComplete="item.isComplete"
            v-on:completedItem="completedItem"
            v-on:deleteItem="deleteItem"></todo-item>
        </ul>
      </div>`
});

data: items의 데이터 구조 변경
할일 완료 기능 변경
할일 삭제 기능 추가

Vue.component('todo-item', {
  props: ['job', 'isComplete'],
  data() {
    return {
      _isComplete: false
    }
  },
  mounted() {
    this._isComplete = this.isComplete;
  },
  computed: {
    printJob() {
      return this.isComplete ?
        `<span class="completed">${this.job}</span>`:
        `${this.job}`
    }
  },
  methods: {
    completeJob() {
      this._isComplete = !this._isComplete;
      this.$emit('completedItem', this.job, this._isComplete);
    },
    deleteJob() {
      this.$emit('deleteItem', this.job);
    }
  },
  template: `
      <li>
        <span v-html="printJob"></span>
        <button v-if="isComplete" class="btn" @click="deleteJob">삭제</button>
        <button v-else class="btn" @click="completeJob">완료</button>
      </li>`
});

작업전 완료 상태에 따른 렌더링
할일 완료 기능 변경
할일 삭제 기능 추가

소스코드: https://goo.gl/AcXNn8

끝으로...

컴포넌트 기반 개발의 이해가 없다면 vue의 장점을 살리지 못할 수 있음
html의 복붙이 아닌 레고처럼 조립하여 페이지를 개발
컴포넌트는 일단 크게 만들고 분리

fin

Vue·tiful Korea 170823 컴포넌트야 놀자

By attdro

Vue·tiful Korea 170823 컴포넌트야 놀자

by sam

4,569

목차

fin

Vue·tiful Korea 170823 컴포넌트야 놀자

More from attdro