[Vue] 컴포넌트 생성하기
컴포넌트란?
컴포넌트 안에는 html js(데이터) style 가 존재하며 재사용이 가능하다.
그러므로 중복되는 함수와 기능을 합칠 수 있으며 뷰컴포넌트도 인스턴스이다.
src 폴더 밑에 components 폴더를 확인할 수 있다.(vue-router를 추가하면 src 폴더 밑에 views 폴더가 생성된다.)
components는 전역과지역 두가지가를 사용할 수 있다.
컴포넌트의 기본 구조
뷰 컴포넌트 내에는 name, components, data, computed같은 기본 프로퍼티가 존재한다. 이 기본프로퍼티 외에도 메소드들이 있다.
✔️전역 component(어떤 tag안에서도 사용이 가능하다.)
기본구조
<컴포넌트명></컴포넌트명> 으로 사용할 수 있다.
<script>
Vue.component('컴포넌트명`, {
template: `
<div>
{{name}}
</div>
`,
data() {
return {
name: 'kozy'
}
},
})
</script>
컴포넌트를 다른 컴포넌트 인스턴스에서 사용하는 것이 가능하다.
<script>
Vue.component('컴포넌트2', {
template: `
<div>
hello
</div>
`
})
Vue.component('컴포넌트명`, {
template: `
<div>
<컴포넌트2></컴포넌트2> //컴포넌트2를 다른 컴포넌트 내부에서 사용할 수 있다.
{{name}}
</div>
`,
data() {
return {
name: 'kozy'
}
},
})
</script>
✔️지역component
기본구조
<script>
const Test = {
template: `
<div>
hello
</div>
`,
data() {
return {
name: 'kozy'
}
},
} // 지역 컴포넌트 생성
const app =new Vue({
el: '#app',
components: {
`butoon`: Test ///인스턴스 내부에서 등록하여 사용한다.
///만약에 등록하지않는다면?
///에러가 발생한다!
}
)}
<script>
Author And Source
이 문제에 관하여([Vue] 컴포넌트 생성하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@duswn38/Vue-컴포넌트-생성하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)