vue.js__props 속성
🌱 vue에서의 props 속성 알아보기
🔸 중요 🔸
- 상위(부모)컴포넌트에서 하위(자식)컴포넌트로 보내줌.
( emit(하위에서 상위로 보냄)의 반대개념 )- (HTML 어트리뷰트는 대소문자 구분이 없기 때문에 브라우저는 대문자를 소문자로 변경하여 읽는다. 그렇기 때문에 카멜 케이스(대소문자 혼용)로 prop의 이름을 정한 경우에 DOM 템플릿 안에서는 케밥 케이스(하이픈으로-연결된-구조)를 사용하여야 올바르게 동작한다.)
- 모든 타입의 변수를 props 할 수 있다.
props 속성 작성 방법) <!-- HTML에서의 kebab-case --> <template> <child-component post-title="hello!"></child-component> </template> ... <script> Vue.component('child-component', { //----- JavaScript에서의 camelCase props: ['postTitle(props속성 이름)'], template: '<h3>{{ postTitle }}</h3>' }) </script>
props 속성 작성 예시)
<template>
<div id='test'> ----- id.test로 연결해준 👉 상위 컴포넌트 부분!!
<child-component :peopleData='name'>
상위로부터 props 받은 하위 컴포넌트 부분
</child-component>
</div>
</template>
<script>
Vue.component('child-component',{
props: ['peopleData'],
template: '<p>{{peopleData}}</p>'
})
</script>
Author And Source
이 문제에 관하여(vue.js__props 속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@park0eun/vue.jsprops-속성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)