vue.js 코딩공작소 책 요약(3)

고급 컴포넌트와 라우팅

• 슬롯: 슬롯은 자식 컴포넌트와 부모 콘텐츠를 엮어 컴포넌트의 콘텐츠를 동적으로 업데이트하기 쉽게 한다.
• 동적 컴포넌트: 사용자 행동에 따라 모든 컴포넌트를 변경하기 쉽게한다. 예를들어 다양한 그래프를 표시하는 관리자 패널을 만든다고 했을때
  사용자 행동을 바탕으로 간단하게 동적 컴포넌트를 사용하여 각 그래프를 변환할 수 있다.

슬롯 사용

컴포넌트를 사용할 때 컴포넌트에 데이터를 전달하기 위해 부모 콘텐츠와 자식 콘텐츠를 엮어야 할 때가 있다.
슬롯요소는 Vue.js에서 컴포넌트의 시작과 끝 태그 사이에 추가 된 데이터를 어딘가에 표시해야 할 때 사용하는 특별한 태그이다.

• 부모에서 자식으로 넘겨주지 않고 콘텐츠를 삽입하는 방법
• 컴포넌트를 사용할 때 시작과 끝 태그 사이에는 콘텐츠를 추가 할 수 없다.

이전에 사용했었던 방법 코드는 잘 작동하지만...

<div id="app">
    <form-component
      :author="authorLabel" // 하위의 폼컴포넌트로 넘겨준다.
      :title="titleLabel">
    </form-component>
    .....

    const FormComponent = {
         template: `
          <div>
           <form>
             <label for="title">{{title}}</label><input id="title" type="text" />
             <label for="title">{{author}}</label><input id="author" type="text" />
           </form>
          <div>
         `,
         props: ['title', 'author']
    }

    new Vue({
         ...생략..
         component: {'form-component': FormComponent},
         data(){
             titleLabel: '제목:',     //폼이 커지면서 여러 속성을 넘겨줘아 할땐 어떨까 더 많은 속성을 컴포넌트에 추가해야 할 듯..?
             authorLabel: '저자:',
             pageLength: ''
         }
    })

슬롯을 사용 해보자.

• 폼 상단에 표시할 텍스트를 추가한다.
• 속성으로 값을 넘겨주는 대신 슬롯을 사용해서 표시한다.
• 컴포넌트에 모든 것을 속성으로 넘겨줄 필요는 없다. 컴포넌트의 시작과 끝 내그 내에 직접 표시할 수 있다.

    <form-component
      :author="authorLabel"
      :title="titleLabel">
      <h1> {{ header }} </h1>    //폼 컴포넌트 내부에 추가된 헤더 변수
    </form-component>
    .....

    const FormComponent = {
         template: `
          <div>
           <form>
             <slot></slot>        //부모에게 슬롯 요소 추가
             <label for="title">{{title}}</label><input id="title" type="text" />
             <label for="title">{{author}}</label><input id="author" type="text" />
           </form>
          <div>
         `,
         props: ['title', 'author']
    }

    new Vue({
         ...생략..
         component: {'form-component': FormComponent},
         data(){
             titleLabel: '제목:',
             authorLabel: '저자:',
             pageLength: ''
         }
    })

예제가 잘 이해가 안갔었는데, 원래 속성을 사용하면 컴포넌트의 시작과 끝에 어떠한 element도 넣을 수 없는데
슬롯을 추가하면 넣을수 있다는 의미인듯...
그래도 아직은 잘 와닿지 않는다..

지정 슬롯

• 위에 예제에서는 슬롯 요소 하나를 컴포넌트에 추가했다.
• 하지만 컴포넌트에 여러 속성을 전달하고 각 속성이 각각 다른 곳에서 표시되어야 한다면?
• 지정 슬롯은 일반 슬롯과 같지만 컴포넌트 안에 구체적으로 배치할 수 있다는 점이 다르다. (이름없는 슬롯과는 달리 위치를 지정해줄수 있다는 의미인듯.)