• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

v-bind가 잘이해가 안됩니다 ㅠ

19.01.28 23:31 작성 조회수 82

0

<tabs v-bind:tabs="tabs" v-bind:selected-tab="selectedTab" v-on:@change="onClickTab">

위처럼 코드가있다고할때 tabs라는 템플릿에 v-bind를 할당하는데 tabs=tabs다 여기서 말하는 첫번째tabs는 속성의 이름이고 뒤에나오는 tabs는 new Vue()에 data{} 오브젝트에 써있는 tabs값인거같은데 tabs="tabs"가 될수있다는게 잘 이해가안됩니다..ㅜ

예를들어 v-bind:class="tabs" 라고한다면 class명으로 new Vue()안에있는 data값중 tabs를 바인딩하는구나 라고 생각되는데 엘레멘트 속성중에 tabs라는게 없을것같고.. data-set으로 tabs를 주게되는건가요?? 실제 html의 모습은

<tabs data-tabs="tabs"> 이런모습이 되는건가요??

답변 1

답변을 작성해보세요.

1

TabComponent.js를 보면 쉽게 이해하실 수 있을겁니다.

컴포넌트의 속성으로 tabs를 정의하고 있어서 이를 사용하는 측에서는 tabs 속성에 바인딩한 것이지요.

props: ['tabs', 'selectedTab']

slectedt-tab속성도 selectedTab으로 연결되는 것이고요.

컴포넌트, 프롭스, 데이터 이름이 모두 "tabs"라서 헷갈릴 수 있겠네요.