728x90
App.vue
<template>
<div>
<HW mesg="HW"
v-bind:headerText="A.header" v-bind:footerText="A.footer">
<!-- html태그를 전달할 경우 slot 사용 -->
<!-- slot 영역 -->
<div>
{{ A.message }}
</div>
<!-- slot 영역 -->
</HW>
</div>
</template>
<script>
import HW from './components/HW.vue'
export default {
components:{
HW,
},
data:function(){
return {
A:{
header:"오바마",
footer:"우리의 친구",
message:"message"
}
}
}
}
</script>
<style>
</style>
HW.vue
<template>
<div>
<h1>{{ mesg }}</h1>
<div>{{ headerText }}</div>
<div class="content">
<slot></slot>
</div>
<div class="footer">
{{ footerText }}
</div>
</div>
</template>
<script>
export default {
props:{
mesg:String,
headerText:String,
footerText:String,
}
}
</script>
<style>
.content{
color:aqua
}
.footer{
color: blue;
}
</style>
App.vue
<template>
<div>
<HW mesg="HW">
<!-- html태그를 전달할 경우 slot 사용 -->
<!-- slot 영역 -->
<div slot="headerText">
{{ A.header }}
</div>
<div slot="speechText">
{{ A.message }}
</div>
<div slot="footerText">
{{ A.footer }}
</div>
<!-- slot 영역 -->
</HW>
</div>
</template>
<script>
import HW from './components/HW.vue'
export default {
components:{
HW,
},
data:function(){
return {
A:{
header:"오바마",
footer:"우리의 친구",
message:"message"
}
}
}
}
</script>
<style>
</style>
HW.vue
<template>
<div>
<h1>{{ mesg }}</h1>
<slot name="headerText"></slot>
<slot name="speechText"></slot>
<slot name="headerText"></slot>
</div>
</template>
<script>
export default {
props:{
mesg:String,
headerText:String,
footerText:String,
}
}
</script>
<style>
.content{
color:aqua
}
.footer{
color: blue;
}
</style>
'단순 코드 기록 > Vue' 카테고리의 다른 글
| Vue_Spring 연결 + 형제 전송(eventBus) (0) | 2024.03.11 |
|---|---|
| Vue_Spring과 연결 (0) | 2024.03.11 |
| Vue_slot (0) | 2024.03.11 |
| Vue_Emit (0) | 2024.03.11 |
| Vue_형제에게 가는 이벤트 (0) | 2024.03.08 |