Vue 컴포넌트 소개

개요

큰 응용 프로그램을 개발할 때는 코드를 더 쉽게 읽고 구조화하고 유지 관리할 수 있도록 더 작은 구성 요소로 나누는 것이 항상 좋은 생각입니다. 대부분의 Vue 초보자는 적어도 개념적으로는 구성 요소가 무엇인지 이해하지만 구성 요소가 할 수 있는 것과 할 수 없는 것을 완전히 이해하지 못할 수 있습니다.

이 가이드에서는 Vue의 구성요소가 무엇인지, 어떻게 작동하는지, 이를 통해 데이터와 이벤트를 전달하는 방법 등을 살펴봅니다.

Vue 컴포넌트란?

구성 요소들 템플릿, 스타일 및 JavaScript 요소를 포함하는 Vue 요소의 재사용 가능한 인스턴스입니다. 각 구성 요소는 각 HTML 요소가 "자체"인 것처럼 "자체"이며, Vue 구성 요소와 HTML 요소 모두 웹 페이지의 빌딩 블록으로 사용할 수 있습니다.

Vue 구성 요소는 JavaScript가 포함된 HTML 요소로 생각할 수 있으며 직접 정의하고 조작할 수 있습니다.

일반적인 Vue 애플리케이션은 필요한 만큼 재사용할 수 있는 수많은 구성 요소로 구성됩니다.

예를 들어 일반적인 웹 사이트에는 탐색 모음, 머리글, 바닥글 등 모든 페이지에 표시되는 섹션이 있습니다. 따라서 각각을 별도의 구성 요소로 만드는 것이 좋습니다. 그렇게 하면 잘 구조화되고 읽기 쉽고 재사용이 가능하며 유지 관리가 쉬운 코드를 생성할 수 있습니다.

Vue 구성 요소를 만드는 방법

프로젝트 생성 방법에 따라 Vue 구성 요소를 생성하는 두 가지 기본 방법이 있습니다. 빌드 설정 유무에 관계없이. 첫 번째 경우 모든 구성 요소는 별도의 파일에 저장됩니다. 두 번째 경우에는 단일 파일에 여러 구성 요소가 있을 수 있습니다.

빌드 설정으로 Vue 구성 요소 만들기

대부분의 프로젝트는 빌드 설정, 단일 파일 구성 요소를 만들 수 있습니다. (SFC) – 전용 구성 요소 파일 .vue 확대. 이를 통해 Vue 구성 요소의 템플릿, 논리 및 스타일을 단일 파일에 캡슐화할 수 있습니다.

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

빌드 설정 없이 Vue 컴포넌트 생성

어떤 이유로든 다음과 같은 패키지 관리자를 사용할 수 없는 경우 npm 컴퓨터에 Vue를 설치하기 위해 앱에서 Vue를 계속 사용할 수 있습니다. Vue를 사용하는 건물의 대안 npm Vue를 통해 설치하는 것입니다 CDN (콘텐츠 전송 네트워크) 앱에서 직접. Vue 구성 요소를 만드는 이 방법을 빠르게 살펴보겠습니다.

빌드 없이 Vue를 설치하면 일반 JavaScript와 마찬가지로 Vue 관련 기능을 사용할 수 있습니다. 구문은 일반적인 SFC에서 본 것과 다소 유사합니다.

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

이 가이드에서는 다음을 사용합니다. SFC 구문, 구성 요소를 만드는 데 가장 일반적으로 사용되는 방법이기 때문입니다.

Vue에 구성 요소를 등록하는 방법

지금까지 Vue에서 구성 요소를 만드는 방법을 살펴보았습니다. 다음 단계는 이러한 구성 요소를 다른 구성 요소 내에서 사용하는 것입니다. (부모-자식 계층 구조).

그러기 위해서는 먼저 사용하고자 하는 컴포넌트를 등록해야 합니다. 이 등록에는 구성 요소를 가져온 다음 등록하는 작업이 수반됩니다. 이를 위한 두 가지 옵션이 있습니다. 글로벌 및 현지 등록.

Vue 구성 요소 – 글로벌 등록

이름에서 알 수 있듯이 전역적으로 등록된 구성 요소는 전역적으로 사용할 수 있습니다. 즉, 다시 가져올 필요 없이 응용 프로그램의 모든 구성 요소에서 사용할 수 있습니다. 이것은 다음을 사용하여 구성요소를 등록함으로써 수행됩니다. app.component() 방법:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

구성 요소가 많은 상황에서 체인 그들을 이렇게:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

구성 요소를 등록한 후 다음 구문을 사용하여 이 애플리케이션 내의 모든 구성 요소 템플릿에서 사용할 수 있습니다.

<ChildComponent/>
<ProfileComponent/>

Vue 구성 요소 – 로컬 등록

등록된 구성 요소의 가용성 범위를 지정할 수 있기 때문에 대부분의 경우 로컬 등록을 사용합니다. 이러한 구성 요소를 가져온 다음 components 옵션은 다음을 수행합니다.

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

구성 요소 이름을 지정할 때 다음을 사용하십시오. 낙타 케이스 이것이 템플릿의 기본 HTML 요소가 아니라 Vue 구성 요소임을 분명히 합니다. 이렇게 하면 JavaScript에서 구성 요소를 더 쉽게 가져오고 등록할 수 있습니다.

Vue 구성 요소를 통해 데이터를 전달하는 방법

구성 요소 생성의 이점 중 하나는 코드를 모듈식으로 만들어 재사용할 수 있다는 것입니다.

프로필 페이지에서 각 학생의 데이터를 수신해야 하는 사용자의 프로필 구성 요소를 생성한다고 가정합니다. 이 경우 이 데이터를 프로필 구성 요소(부모 구성 요소)에서 사용자 프로필 구성 요소(자식 구성 요소)로 전달해야 하며 props를 사용합니다.

소품

props는 구성 요소에 등록할 수 있는 사용자 정의 속성이므로 다음을 사용하여 상위 구성 요소에서 하위 구성 요소로 데이터를 전달할 수 있습니다. props 스크립트 태그 내의 옵션:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

슬롯

Vue 슬롯은 한 구성 요소에서 다른 구성 요소로 모든 유형의 콘텐츠를 전달할 수 있는 예약된 공간입니다. 이는 props와 달리 부모 구성 요소가 자식 구성 요소 내부의 콘텐츠를 제어하기 때문에 props보다 중앙 집중식 제어를 제공합니다. 예를 들어 다음 버튼을 만들 수 있습니다.

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

그런 다음 원하는 곳 어디에서나 이 구성 요소를 사용하고 원하는 콘텐츠를 제공할 수 있습니다. 콘텐츠를 제공하지 않으면 우리가 제공한 기본값을 사용하게 됩니다(Click Me).

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Vue 구성 요소에서 이벤트를 내보내는 방법

props는 상위 구성 요소에서 하위 구성 요소로 데이터를 보내는 데 사용된다는 것을 배웠습니다. 그러나 자식 구성 요소에서 부모 구성 요소로 무언가를 보내는 방법이 있는지 궁금할 수 있습니다. 답은 예, 자식 구성 요소에서 부모 구성 요소로 이벤트를 보낼 수도 있습니다.

부모 구성 요소가 있다고 가정합니다(App.vue) 단일 하위 구성요소(MyBlogPost.vue). 또한 자식 구성 요소에는 제목을 변경하는 버튼이 포함되어 있습니다.

버튼을 클릭할 때 페이지 제목을 변경하여 함수가 트리거된다고 가정합니다.

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

자식 구성 요소는 다음과 같습니다.

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

결론

이 가이드에서는 Vue를 사용하는 모든 사람에게 필수적인 Vue의 구성 요소로 작업하는 방법을 배웠습니다. 또한 데이터를 보내고 받는 방법과 이벤트를 내보내는 방법도 배웠습니다.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://stackabuse.com/introduction-to-vue-components/