VueJS day11

컴포넌트

컴포넌트

컴포넌트는 뷰 객체를 생성하여 그에 맞는 컴포넌트를 생성해주어 template를 설정해주면 html에서 설정해준 template를 나타낼 수 있다. 컴포넌트 생성 종류로는 지역에 등록하는 방법과 전역에 등록하는 방법으로 나뉜다. 예시를 통해 알아보자.

지금 해볼 예시는 지역에 등록하는 컴포넌트이다.

<div id="app">
    <ol>
        <todo-item></todo-item>
        <todo-item></todo-item>
        <todo-item></todo-item>
        <todo-item></todo-item>
    </ol>
</div>
<script>
    var appp = {
        template: '<li>This is a todo</li>'
    }

    var app = new Vue({
        el: '#app',
        components:{
            'todo-item' : appp
        }
    })
</script>

다음으로 전역에 등록하는 컴포넌트 방식이다.

<div id="app">
    <ol>
        <todo-item></todo-item>
        <todo-item></todo-item>
        <todo-item></todo-item>
        <todo-item></todo-item>
    </ol>
</div>
<script>

    Vue.component('todo-item', {
        template: '<li>This is a todo</li>'
    })

    var app = new Vue({
        el: '#app'
    })
</script>

윗 두 코드의 결과가 같다는 것을 확인 할 수 있다.

이러한 방식을 컴포넌트라고 하는데, 컴포넌트를 사용함에 있어 일부 제한이 되는 요소들이 있다.

table, ul, ol, select는 사용함에 있어 문제가 발생할 수 있어 해결하기 위해

<table>
  <tr is="my-row"></tr>
</table>

이러한 방식으로 사용하면된다.