강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

딩띵님의 프로필 이미지
딩띵

작성한 질문수

Vue.js 시작하기 - Age of Vue.js

props 속성

components질문입니다

작성

·

293

1

안녕하세요 강사님 강의를 다시 정주행 하면서 공부하는 학생입니다
컴포넌트를 정의한때
컴포넌트이름 : 컴포넌트 내용으로 정의하는데
컴포넌트의 내용은 객체로 정의하는 건가요?
 
  components: {
            'app-footer' : {
                  template:'<footer>footer~~</footer>'
          }
이런식으로 말고↓↓↓↓
      components: {
            'app-footer' : '<footer>footer~~</footer>'
          }
 
컴포넌트 내용을 이렇게 해도 상관없는 건가요?
 
 <div id="app">
        <app-header v-bind:프롭스 속성 이름 :'상위 컴포넌트의 데이터 이름 '></app-header>   ← 컴포넌트 태그 정의 
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = { ← 컴포넌트 내용 등록
            template: '<h1>Header</h1>'
        }

        new Vue({
            el:'#app',
            components: {   ← 컴포넌트 이름 정의
                'app-header': appHeader 
            },
            data : {
                message:'hi'
            }
        })

이렇게 생각하면 될까요?? 
다시 들을니깐 애매하게 이해한 내용들이 많아서 물어볼께 왕창 쏟아지네요 ㅜㅜ 

퀴즈

컴포넌트 간에 명확한 통신 규칙이 필요한 주된 이유는 무엇일까요?

코드의 양을 늘리기 위해

복잡한 데이터 관계와 버그 추적의 어려움을 피하기 위해

특정 개발 패턴을 강제하기 위해

컴포넌트의 스타일을 개선하기 위해

답변 1

0

캡틴판교님의 프로필 이미지
캡틴판교
지식공유자

안녕하세요 딩띵님, 컴포넌트 내용에 정의할 내용은 뷰 컴포넌트(인스턴스)의 문법을 따르셔야 합니다. 아래 문서 참고해 보세요 :)

https://joshua1988.github.io/vue-camp/vue/instance.html#%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%89%E1%85%B3%E1%84%90%E1%85%A5%E1%86%AB%E1%84%89%E1%85%B3%E1%84%8B%E1%85%B4-%E1%84%89%E1%85%A9%E1%86%A8%E1%84%89%E1%85%A5%E1%86%BC-api%E1%84%83%E1%85%B3%E1%86%AF

딩띵님의 프로필 이미지
딩띵

작성한 질문수

질문하기