Step08_eventEmit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step08_eventEmit.html</title>
</head>
<body>
<h1>자식 component 에서 발생하는 이벤트</h1>
<div id="app">
<my-component v-on:mom="feed"></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("my-component", {
template:`
<div>
<button v-on:click="callMom">엄마!</button>
</div>
`,
methods:{
callMom(){
// this.$emit("이벤트명", 전달할 data)
this.$emit("mom", "배고파");
}
}
});
let app=new Vue({
el:"#app",
methods:{
feed(data){
alert(data);
}
}
});
</script>
</body>
</html>
this.$emit("이벤트명", 전달할 data)
Step08_eventEmit2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step08_eventEmit2.html</title>
</head>
<body>
<h1>event emit 예제</h1>
<div id="app">
<friend-component
v-bind:list="members"
v-on:delete="deleteMember"></friend-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("friend-component",{
template:`
<ul>
<li v-for="(item, index) in list">
{{item}}
<button v-on:click="deleteItem(index)">삭제</button>
</li>
</ul>
`,
props:["list"],
methods:{
deleteItem(i){
this.$emit("delete", i);
}
}
});
let app=new Vue({
el:"#app",
data:{
members:['김구라','해골','원숭이']
},
methods:{
deleteMember(index){
this.members.splice(index, 1);
}
}
});
</script>
</body>
</html>
splice();에 대한 정보는 아래의 링크를 참고하면 좋다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
Step08_eventEmit3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step08_eventEmit3.html</title>
</head>
<body>
<h1>event emit 예제</h1>
<div id="app">
<friend-component
v-bind:list="members"
v-on:delete="deleteMember"
v-on:update="updateMember"></friend-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("friend-component",{
template:`
<ul>
<li v-for="(item, index) in list">
{{item}}
<button v-on:click="updateItem(index)">수정</button>
<button v-on:click="deleteItem(index)">삭제</button>
</li>
</ul>
`,
props:["list"],
methods:{
deleteItem(i){
this.$emit("delete", i);
},
updateItem(i){
const newName=prompt("수정할 이름을 입력하세요");
//this.$emit("update", {i:i, newName:newName});
this.$emit("update", {i, newName});
}
}
});
let app=new Vue({
el:"#app",
data:{
members:['김구라','해골','원숭이']
},
methods:{
deleteMember(index){
this.members.splice(index, 1);
},
updateMember(data){
//아래처럼 배열을 변경하면 변경이 감지가 안되기 때문에 화면 업데이트가 안된다.
//this.members[data.i] = data.newName;
//아래의 2가지 방법중 하나로 배열을 변경해야 한다.
//Vue.set(this.members, data.i, data.newName);
this.$set(this.members, data.i, data.newName);
}
}
});
</script>
</body>
</html>
'javascript, framework > vue' 카테고리의 다른 글
| Step10_Ajax (0) | 2022.08.26 |
|---|---|
| Step09_ref (0) | 2022.08.26 |
| Step07_component (0) | 2022.08.26 |
| vue 사용 예시 (signup_form, 회원가입) (0) | 2022.08.26 |
| Step04~06(style, if, for) (0) | 2022.08.26 |
