[실습]
1. 다음 구조를 가진 화면을 구성해보시오
- hint
- bootstrap의 cdn은 index.html에 추가하시오
- article의 반복은 v-for를 활용하시오.
<template>
<div>
<NavBarComponent/>
<div class="d-flex">
<AsideComponent/>
<MainComponent/>
</div>
</div>
</template>
<script setup>
import NavBarComponent from './components/NavBarComponent.vue';
import MainComponent from './components/MainComponent.vue';
import AsideComponent from './components/AsideComponent.vue';
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="box">
<h1>Main</h1>
<div class="row">
<ArticleComponent v-for="num in lst"/>
</div>
</div>
</template>
<script setup>
import ArticleComponent from './ArticleComponent.vue';
const lst = [1, 2, 3, 4, 5, 6]
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="box">
<h1>Aside</h1>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="col-4">
<h4>Article</h4>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="box">
<h1>NavBar</h1>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>
.box{
margin: 1rem;
padding: 1rem;
border: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
2. 1. 에서 만든 article들에게 props를 통해 데이터를 전달해보시오.
<template>
<div class="col-4">
<h4>Article {{ articleNum }}</h4>
</div>
</template>
<script setup props="articleNum">
</script>
<style scoped>
</style>
<template>
<div class="box">
<h1>Main</h1>
<div class="row">
<ArticleComponent v-for="num in lst" :key="num" :articleNum="num" />
</div>
</div>
</template>
<script setup>
import ArticleComponent from './ArticleComponent.vue';
const lst = [1, 2, 3, 4, 5, 6];
</script>
<style lang="scss" scoped>
</style>
3. emit의 실습문제를 직접 구현해보시오.
- 자식 컴포넌트에서 입력받은 데이터를 부모 컴포넌트에서 보여주자.
<template>
<div class="box">
<h1>NavBar</h1>
<button @click="emitData">Emit Data</button>
</div>
</template>
<script setup>
import { defineEmits } from 'vue';
const emitData = () => {
emit('data-emitted', 'Data from NavBar');
}
defineEmits(['data-emitted']);
</script>
<style lang="scss" scoped>
</style>
<template>
<div>
<NavBarComponent @data-emitted="receiveDataFromNavBar" />
<div class="d-flex">
<AsideComponent />
<MainComponent />
</div>
<div v-if="receivedData">
Received Data: {{ receivedData }}
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import NavBarComponent from './components/NavBarComponent.vue';
import MainComponent from './components/MainComponent.vue';
import AsideComponent from './components/AsideComponent.vue';
const receivedData = ref('');
const receiveDataFromNavBar = (data) => {
receivedData.value = data;
}
</script>
<style lang="scss" scoped>
</style>
- NavBarComponent에서 버튼을 클릭하면 emit을 통해 'data-emitted' 이벤트가 발생한다.
- 이를 App.vue에서 수신하여 데이터를 처리합니다. 데이터는 receivedData 변수에 저장되고, 이를 화면에 표시하도록 한다.
