Components 구조화되고 유지 관리 가능한 웹 애플리케이션을 구축할 수 있게 해주는 Vue.js의 중요한 개념입니다. 을(를) 사용하면 components 애플리케이션을 각각 사용자 인터페이스의 특정 부분을 담당하는 독립적인 작은 부분으로 나눌 수 있습니다.
이 기사에서는 Vue.js에서 생성하고 components 이를 사용하여 코드를 재사용하고 components. props 부모 구성 요소에서 자식 구성 요소로 데이터를 전달하는 데 사용하는 방법과 이벤트를 사용하여 자식 구성 요소에서 부모 구성 요소로 데이터를 다시 전달하는 방법에 대해 자세히 알아봅니다 .
1. 만들기 Components
Components Vue.js에서 `Vue.component` 메서드를 사용하거나 단일 파일을 정의하여 생성할 수 있습니다 components.
예:
// Global Component using Vue.component
Vue.component('my-component', {
// Component options
});
// Local Component using single-file component
// MyComponent.vue
<template>
<!-- Component template -->
</template>
<script>
export default {
// Component options
};
</script>
2. 구성요소 구조
Vue 구성 요소는 템플릿, 스크립트 및 선택적 스타일로 구성됩니다. 템플릿에는 HTML 마크업이 포함되어 있고 스크립트에는 구성 요소 옵션(데이터, 메서드, 계산된 속성, 수명 주기 후크)이 포함되어 있으며 스타일은 구성 요소의 모양을 정의합니다.
예:
<template>
<div>
<h1>{{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
<style scoped>
/* Component styles */
</style>
3. 컴포넌트 재사용성
Components Vue.js의 코드를 애플리케이션 전체에서 재사용할 수 있으므로 코드 중복이 줄어들고 유지 관리가 향상됩니다. 모듈식 접근 방식을 장려하여 더 작은 것을 더 큰 것으로 구성할 수 있습니다 components.
예:
// ParentComponent.vue
<template>
<div>
<child-component></child-component>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
};
</script>
4. Props
Props components 부모에서 자식으로 데이터를 전달할 수 있습니다 components. Props 자식 구성 요소에서 선언되며 일반 데이터 속성처럼 사용할 수 있습니다.
예:
// ParentComponent.vue
<template>
<div>
<child-component:message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent!'
};
}
};
</script>
// ChildComponent.vue
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
props: ['message']
};
</script>
5. 커스텀 이벤트
Components 부모와 통신하기 위해 맞춤 이벤트를 내보낼 수 있습니다 components. 부모는 components 이러한 이벤트를 듣고 그에 따라 반응할 수 있습니다.
예:
// ChildComponent.vue
<template>
<div>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$emit('increment-event');
}
}
};
</script>
// ParentComponent.vue
<template>
<div>
<child-component @increment-event="handleIncrement"></child-component>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
count: 0
};
},
methods: {
handleIncrement() {
this.count++;
}
}
};
</script>
이 예제는 Vue.js의 핵심 개념을 보여주고 components 유연성, 재사용성 및 커뮤니케이션 기능을 보여줍니다. Components Vue.js를 확장 가능한 애플리케이션을 구축하기 위한 강력한 프레임워크로 만드는 모듈식 및 유지 관리 가능한 코드를 만드는 데 도움이 됩니다.