728x90
App.vue
<template>
<div>
<!--
3. 자식 컴포넌트의 속성으로 입력
v-on:자식의 함수="부모의 함수"
-->
<HW mesg="자식에서 부모로 이벤트 전달"
v-on:xyz="receive1"
@xyz2="receive2"
/>
</div>
</template>
<script>
import HW from './components/HW.vue'
export default {
components:{
HW
},
data: function(){
return {
}
},
methods: { //4. 자식의 정보를 출력하는 이벤트 함수 생성
receive1: function(){
console.log("부모가 xyz이벤트를 받아 receive1 발동");
},
receive2: function(value1, value2){
console.log("부모가 xyz2이벤트를 받아 receive2 발동");
console.log(value1)
console.log(value2)
},
}
}
</script>
<style>
</style>
HW.vue
<template>
<div>
<h1>{{ mesg }}</h1>
<!-- 자식에서 부모로 데이터 전송은 이벤트를 이용
자식에서는 이벤트를 emit하고 부모는 v-on을 이용하여 수신
this.$emit("xyz") : 이벤트 명칭 전달 => v-on:xyz="reveive"
-->
<!-- 1. 이벤트 발생 -->
<button @click="xxx">부모에게 데이터 전달 1</button><br>
<button v-on:click="xxx2">부모에게 데이터 전달 2</button>
</div>
</template>
<script>
export default {
props:{
mesg:String
},
methods:{
xxx:function(){
console.log("자식 xxx함수에서 실행", this);
this.$emit("xyz"); //2. 이벤트 명칭을 부모에게 이벤트명칭 "xyz"로 전달(emit 안의 글자)
},
xxx2:function(){
console.log("자식 xxx2함수에서 실행", this);
this.$emit("xyz2", 100, "홍길동"); //2. 이벤트 명칭을 부모에게 이벤트명칭 "xyz2"로 전달 + 데이터 전달(emit 안의 글자)
},
}
}
</script>
<style>
</style>
App.vue
<template>
<div>
선택한 책이름: {{bookName}}<br>
<hr>
<BookList msg="BookList exam" v-bind:bookList="list"
v-on:xyz="recevie"
/>
<hr>
</div>
</template>
<script>
import BookList from './components/BookList';
export default {
name:'App',
components:{
BookList
},
data:function(){
return{
list:[
{
id: "p01",
name: "위험한 식탁",
price: 2000,
date: "20170401",
img: "a",
},
{
id: "p02",
name: "공부의 비결",
price: 3000,
date: "20170402",
img: "b",
},
{
id: "p03",
name: "오메르타",
price: 2500,
date: "20170401",
img: "c",
},
{
id: "p04",
name: "행복한 여행",
price: 4000,
date: "20170401",
img: "d",
},
{
id: "p05",
name: "해커스 토익",
price: 2000,
date: "20170401",
img: "e",
},
{
id: "p06",
name: "도로 안내서",
price: 2000,
date: "20170401",
img: "f",
},
],
bookName:""
}
},
methods: {
recevie:function(data){
console.log("recieve함수 호출 =============");
this.bookName=data;
}
},
}
</script>
<style>
</style>
BookList.vue
<template>
<div>
<h1>{{msg}}</h1>
<ul v-for="(book, idx) in bookList" v-bind:key="idx">
<a @click="xyz">
<img v-bind:src="require(`../assets/images/${book.img}.jpg`)"
width="100" height="100"
v-bind:data-xxx="book.name">
</a>{{book.name}}
</ul>
</div>
</template>
<script>
export default {
name:"BookList",
props:{
bookList:Array,
msg:String
},
methods:{
xyz:function(e){
console.log(e.target.dataset.xxx); //선택한 책이름
this.$emit("xyz", e.target.dataset.xxx);
}
}
}
</script>
<style>
</style>
'단순 코드 기록 > Vue' 카테고리의 다른 글
| Vue_Emit (0) | 2024.03.11 |
|---|---|
| Vue_형제에게 가는 이벤트 (0) | 2024.03.08 |
| Vue_Select Option (0) | 2024.03.08 |
| Vue_개별 삭제, 선택 삭제 (0) | 2024.03.08 |
| Vue_다이나믹 함수 (0) | 2024.03.08 |